Bloggerデザイン : FAQ

1. デザインのタイプ

【CSSピュア・FAQアコーディオン】
JavaScriptを一切使用せず、HTMLとCSSのみで開閉ロジックを完結させた、超軽量で堅牢なFAQセクションです。

スクリプト干渉の心配がないため、Bloggerなどのブログプラットフォームでも安定して動作し、ページの表示速度を一切犠牲にしません。

• Bloggerでの反応を確実にする構造とは？

  labelタグで全体を包み、非表示にしたcheckboxと連動させることで、モバイル環境でもタップ判定を確実に広げることができます。Blogger特有のクリック干渉を防ぐための最適解です。

• なぜJavaScriptを使わないのですか？

  JSを使わないことで、ページの表示速度（PageSpeed Insights）に好影響を与え、スクリプトエラーによる表示崩れを完全に回避できるからです。保守性も極めて高いのが特徴です。

2. デザインの特徴

• JS不要のチェックボックス・トリック
  CSSの :checked 疑似クラスを利用。スクリプトによるエラーの心配がなく、Bloggerの読み込み速度を一切落としません。
• 高いアクセシビリティ
  labelタグによるラッピング構造を採用。モバイル環境でもタップ判定が広く、確実に反応するユーザーフレンドリーな設計です。
• 洗練されたアニメーション
  矢印の回転やコンテンツの展開に滑らかな transition を適用し、シンプルながらもリッチな操作感を提供します。

3. 紹介コード

<div id="blg-faq-v3">
  <ul>
    <li>
      <label class="faq-label">
        <input type="checkbox" class="faq-trigger">
        <i></i>
        <h2>質問タイトル</h2>
        <div class="faq-content">
          <p>回答テキスト</p>
        </div>
      </label>
    </li>
    <li>
      <label class="faq-label">
        <input type="checkbox" class="faq-trigger">
        <i></i>
        <h2>質問タイトル</h2>
        <div class="faq-content">
          <p>回答テキスト</p>
        </div>
      </label>
    </li>    
  </ul>
</div>

<style>
/* --- FAQ Wrapper --- */
#blg-faq-v3 {
  max-width: 700px;
  margin: 2em auto;
  padding: 0 15px;
  font-family: 'Poppins', sans-serif;
}

#blg-faq-v3 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#blg-faq-v3 ul li {
  position: relative;
  background: #fff;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,0.1);
  margin-bottom: 15px;
  border-radius: 4px;
  overflow: hidden;
}

/* --- クリック判定ラベル --- */
#blg-faq-v3 .faq-label {
  display: block;
  width: 100%;
  cursor: pointer;
}

#blg-faq-v3 .faq-trigger {
  display: none;
}

/* --- Question (H2) --- */
#blg-faq-v3 h2 {
  color: #cc071e;
  font-size: 18px !important;
  line-height: 1.4 !important;
  padding: 20px 50px 20px 15px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  border: none !important;
  transition: .2s;
  text-align: left;
}

/* --- Answer (P) --- */
#blg-faq-v3 .faq-content {
  color: #333;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 15px;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}

#blg-faq-v3 .faq-content p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding-bottom: 20px;
  color: #333 !important;
  text-align: left;
}

/* --- Logic --- */
#blg-faq-v3 .faq-trigger:checked ~ h2 {
  color: #000;
}

#blg-faq-v3 .faq-trigger:checked ~ .faq-content {
  max-height: 1000px;
  opacity: 1;
}

/* --- Arrow Icon --- */
#blg-faq-v3 i {
  position: absolute;
  right: 20px;
  top: 28px;
  pointer-events: none;
}

#blg-faq-v3 i:before, #blg-faq-v3 i:after {
  content: "";
  position: absolute;
  background-color: #cc071e;
  width: 3px;
  height: 9px;
  transition: 0.3s;
}

#blg-faq-v3 .faq-trigger:not(:checked) ~ i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
#blg-faq-v3 .faq-trigger:not(:checked) ~ i:after {
  transform: translate(2px, 0) rotate(-45deg);
}

#blg-faq-v3 .faq-trigger:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
#blg-faq-v3 .faq-trigger:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}
</style>