アコーディオン（FAQ 用）
HTML5 の <details> / <summary> タグで JavaScript ゼロのアコーディオン FAQ。SEO 構造化データ FAQPage との相性も◎。
解説
アコーディオン（FAQ 用）は、UI コンポーネントカテゴリの「アコーディオン」に分類される実装パターンです。CSS のみで構成され、難易度はシンプルレベル。
details / summary タグを使った最小コードの FAQ アコーディオン。JS 不要・HTML 標準機能だけで開閉。
HTML5 の <details> / <summary> タグを使えば、JavaScript なしでアコーディオン UI が作れます。FAQ ページの定番実装で、Google の FAQPage 構造化データとも相性が良く、検索結果のリッチリザルト表示にも繋がる可能性があります。
このサンプルでは、シンプルな質問+回答パターンで、開閉時の +/× 表示まで CSS で実装しています。コピペしてそのまま FAQ セクションに使えます。
仕組み
下記コードタブから HTML / CSS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
WAI-ARIA 属性を活用したアクセシブルな実装です。スクリーンリーダー・キーボード操作にも配慮しています。
注意点 / カスタマイズ時のポイント
<details> は標準でアコーディオン動作するため、複数同時に開くのが許容されます。「1 つだけ開く」挙動にしたい場合は JavaScript で他の details を閉じる処理が必要。
開閉アニメーションは ::details-content 疑似要素（Chrome 131+）か、独自に高さアニメーションを実装する必要があります。
使用例・適したシーン
- FAQ セクション
- 詳細スペック表示
- ナビゲーションの折りたたみ
よくある質問
なめらかに開閉アニメーションさせたい
details::details-content 疑似要素（2024 年〜 Chrome）に transition を当てる方法か、JS で max-height アニメーションを実装する方法があります。JSON-LD の FAQPage 構造化データを併設するべき？
はい。各 Q&A を
@type: Question / @type: Answer でマークアップすると、Google 検索でリッチリザルト化される可能性があります（保証はされません）。このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。