アコーディオン（FAQ 用）
HTML5 の <details> / <summary> タグで JavaScript ゼロのアコーディオン FAQ。SEO 構造化データ FAQPage との相性も◎。
解説
HTML 標準の details と summary タグだけで作る、JS 不要の FAQ アコーディオンです。summary が質問の見出し、その下のコンテンツが答えになり、クリックで開閉します。開閉のロジックはブラウザ標準機能が担うため、スクリプトは一切要りません。開いた状態は details[open] で検知でき、影を濃くしたり、summary::after のプラス記号を rotate(45deg) で×印に回転させて開閉状態を視覚化しています。
使う場面
- サービスサイトやサポートページのよくある質問
- 商品の詳細仕様や注意事項の折りたたみ表示
- 長い利用規約・ガイドの章ごとの開閉
項目を増やすときは details ブロックをそのまま複製するだけです。標準のマーカー（三角）は list-style:none と ::-webkit-details-marker の非表示で消し、自前のプラス記号に置き換えています。details は標準でキーボード操作と支援技術に対応しているため、アクセシビリティ面でも堅実です。複数を同時に開きたくない場合は、各 details に同じ name 属性を付けると排他開閉になります。
使用例・適したシーン
- FAQ セクション
- 詳細スペック表示
- ナビゲーションの折りたたみ
よくある質問
JavaScript なしで本当に開閉できますか？
できます。details と summary はブラウザ標準で開閉機能を持つHTMLタグです。クリックやキーボード操作での開閉、支援技術への状態通知もブラウザが担うため、スクリプトを書く必要がありません。
1つ開いたら他を自動で閉じたいのですが？
各 details タグに同じ name 属性を付けると、ラジオボタンのように排他制御になり、1つ開くと他が自動で閉じます。独立して複数開きたい場合は name を付けないままにします。