コピペで完結！アコーディオン#05【FAQやQ&A向けに最適化】

html/css/js

FAQやQ&A向けに最適化

よくある質問（FAQ）ページにぴったりな「リスト型アコーディオンデザイン」です。
JavaScriptで開閉制御を行い、安定した動作とスムーズなアニメーションを実現します。
CSS・HTML・JSを分離して掲載しているので、コピペですぐ利用可能です。

コードについて 本記事のコードはAI（ChatGPT）による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

コードをコピーして使おう！

/* ======================================================
   セクション②（デモ）向けCSS：WordPressテーマに上書きされない設計
   - すべて #demo-section 配下＋.faqx- 名前空間でスコープ
   - 背景・色・影・レイアウトを明示指定し、継承や初期化の差を排除
   ====================================================== */

/* --- セクション外枠（フォント・色・トークンを定義） --- */
#demo-section.demo-wrap{
  max-width:960px;                                /* セクションの最大幅を指定（中央寄せの基準） */
  margin:0 auto;                                  /* セクション全体を中央に配置 */
  padding:0 16px;                                 /* 画面端との余白（左右） */
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Yu Gothic UI",sans-serif; /* 可読性の高い安全なフォントスタック */
  color:#0f172a;                                  /* セクション内の基本文字色 */
  --accent:#0b6bff;                               /* アクセントカラー（質問やアイコンなどに使用） */
  --muted:#475569;                                /* 補助テキスト色（回答の本文など） */
  --border:#e5e7eb;                               /* 罫線色（境界線） */
  --hover:#f8fafc;                                /* ホバー背景色（薄いグレー） */
}

/* --- セクション見出し --- */
#demo-section h2{
  font-size:clamp(18px,2.6vw,24px);              /* 画面幅に応じて可変する見出しサイズ（最小18px〜最大24px） */
  margin:28px 0 16px;                             /* 見出しの上下余白（上28px / 下16px） */
  font-weight:700;                                 /* 太字で視認性を高める */
}

/* --- FAQ全体コンテナ（カード風の白背景＋角丸＋影） --- */
.faqx-container{
  border-top:1px solid var(--border);             /* 上端にガイドとなる細い罫線を追加 */
  background:#fff;                                /* 背景を白で固定（テーマの背景色の影響を受けない） */
  border-radius:10px;                             /* 角丸で柔らかい印象に */
  box-shadow:0 2px 6px rgba(0,0,0,0.04);          /* 浮かせるための淡いドロップシャドウ */
  overflow:hidden;                                 /* はみ出す子要素を隠して角丸を保つ */
  isolation:isolate;                               /* 外部のスタッキングコンテキスト（z-index等）から独立させる */
}

/* --- 各FAQ項目の区切り線 --- */
.faqx-item{
  border-bottom:1px solid var(--border);          /* 項目間を1pxのラインで区切る */
}

/* --- 質問行（クリック可能なヘッダ） --- */
.faqx-question{
  display:flex;                                   /* テキストと右端アイコンを横並びにする */
  align-items:center;                             /* 高さ方向の中央揃え */
  justify-content:space-between;                  /* 左右端に要素を配置（テキスト左／アイコン右） */
  gap:1em;                                        /* テキストとアイコンの間隔 */
  padding:16px 0;                                 /* クリックしやすい上下の余白 */
  cursor:pointer;                                 /* クリック可能であることをカーソルで示す */
  position:relative;                              /* 将来的な拡張（絶対配置要素の基準） */
  color:var(--accent);                            /* 質問文をアクセントカラーで強調 */
  font-weight:700;                                /* 視認性向上のため太字 */
  font-size:16px;                                 /* ベースの文字サイズ */
  text-align:left;                                /* テキストは左揃え */
  background:transparent;                         /* 背景は透明（親の白背景を見せる） */
  transition:background .2s ease;                 /* ホバー時の背景変化をなめらかに */
  user-select:none;                               /* 連打時にテキストが選択されないようにする */
}

/* --- 質問行ホバー時の視覚フィードバック --- */
.faqx-question:hover{
  background:var(--hover);                        /* うっすら背景色を付けてホバーを示す */
}

/* --- 右端アイコンのラッパ（＋ → × の変形対象） --- */
.faqx-icon{
  flex:0 0 24px;                                  /* 幅を24pxに固定（縮まない・広がらない） */
  height:24px;                                    /* 高さも24pxに固定 */
  display:flex;                                   /* 中央揃えのためのフレックスボックス */
  align-items:center;                              /* 縦方向で中央揃え */
  justify-content:center;                          /* 横方向で中央揃え */
  transition:transform .25s ease;                 /* 回転などのアニメーションに対応 */
}

/* --- SVGアイコン（＋号の線を描画） --- */
.faqx-icon svg{
  width:18px;                                     /* アイコンの見た目サイズ（幅） */
  height:18px;                                    /* アイコンの見た目サイズ（高さ） */
  stroke:var(--accent);                           /* 線の色はアクセントカラー */
  stroke-width:3;                                 /* 線の太さ（見やすい太さに調整） */
  stroke-linecap:round;                           /* 線の端を丸めて美しく見せる */
  transition:transform .25s ease;                 /* 回転（＋→×）をスムーズにする */
}

/* --- 回答エリア（アコーディオンの中身） --- */
.faqx-answer{
  max-height:0;                                   /* 初期状態は閉じた状態（高さ0） */
  overflow:hidden;                                /* はみ出しを隠してスライド感を出す */
  color:var(--muted);                             /* 本文色は落ち着いたトーン */
  font-size:15px;                                 /* 本文サイズ */
  line-height:1.8;                                /* 行間をやや広めにして読みやすく */
  padding-left:1.8em;                             /* 「A.」が少し字下げされて見えるインデント */
  transition:max-height .3s ease, padding .3s ease; /* 開閉時の高さ・余白変化をアニメーション */
}

/* --- 回答内の段落の余白調整 --- */
.faqx-answer p{
  margin:0;                                       /* テーマに依存しないよう段落の外余白をリセット */
  padding:8px 0 16px 0;                           /* 上8px・下16pxの内側余白で読みやすく */
}

/* --- 開いた状態（.open が付与されたとき） --- */
.faqx-item.open .faqx-answer{
  max-height:320px;                               /* 内容が見える十分な最大高さ（必要に応じて調整） */
  padding:8px 0 16px 1.8em;                       /* 開いたときは上下の余白を追加して余裕を持たせる */
}

/* --- 開いたときはアイコンを回転させて「×」に見せる --- */
.faqx-item.open .faqx-icon svg{
  transform:rotate(45deg);                        /* 十字の縦棒を45度回転させてバツ印に見せる */
}

/* --- モバイル最適化（600px以下） --- */
@media(max-width:600px){
  .faqx-question{
    font-size:15px;                               /* 小さめ画面では質問文字を少し小さく */
    padding:14px 0;                               /* タッチしやすいが過剰でない余白に調整 */
  }
  .faqx-answer{
    font-size:14px;                               /* 本文も1段階小さくして収まりを良くする */
  }
}

コメント