FAQ セクション（アコーディオン）
よくある質問を縦に積み、クリックで開閉できるアコーディオンです。最大の特徴は JavaScript を一切使わず、HTML 標準の details と summary 要素だけで開閉を実現している点です。
解説
よくある質問を縦に積み、クリックで開閉できるアコーディオンです。最大の特徴は JavaScript を一切使わず、HTML 標準の details と summary 要素だけで開閉を実現している点です。標準機能なのでキーボード操作やアクセシビリティに強く、最初の項目には open 属性を付けて開いた状態で表示しています。デフォルトの三角マーカーは ::-webkit-details-marker を消し、summary::after の「+」記号を開閉に合わせて rotate(45deg) で「×」風に回しています。影の変化にだけ transition を当てています。
使う場面
- 料金・解約・トライアルなどの購入前の不安解消
- サポートページのよくある質問一覧
- LP 終盤で疑問をまとめて答える Q&A ブロック
項目を増やすときは details ブロックを足すだけです。複数を同時に開かせたくない場合は各 details に同じ name 属性を付けると排他開閉になります。プラス記号の色や回転の見せ方は summary::after で調整できます。検索エンジンの FAQ 表示を狙うなら、質問と回答のテキストを正確に対応させ、画像ではなく文字で書くことが大切です。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
クリックで複数の項目が同時に開かないようにできますか？
各 details に同じ name 属性を付けると、ラジオボタンのように 1 つ開くと他が閉じる排他動作になります。JavaScript は不要で、HTML の属性追加だけで切り替えられます。
開閉の動きにアニメーションを足せますか？
details 要素の開閉自体は標準では瞬時に切り替わります。このスニペットでは影とプラス記号の回転だけを transition で滑らかにしています。高さのアニメーションが欲しい場合は別途 CSS や JavaScript の追加が必要です。