プラス開閉 FAQ
プラス記号と×記号で開閉する FAQ アコーディオンです。JavaScript を使わず、HTML 標準の details 要素と summary 要素だけで開閉を実現しているのが特徴です。 summary::after の擬似要素で「＋」を表示し、開いた状態（ [open] ）では「×」に切り替わるため、最小限の…
このパーツの使いどころと実装ポイント
プラス記号と×記号で開閉する FAQ アコーディオンです。JavaScript を使わず、HTML 標準の details 要素と summary 要素だけで開閉を実現しているのが特徴です。summary::after の擬似要素で「＋」を表示し、開いた状態（[open]）では「×」に切り替わるため、最小限のコードで状態が直感的に伝わります。
向いている場面
- 料金や納期などのよくある質問をまとめるページ
- サービス説明の末尾に置く疑問解消セクション
- サポート・ヘルプの簡易な Q&A
質問が増えても details を追加するだけで済み、保守が容易です。回答が長くなる場合は div の中にリストや段落を入れても崩れません。
実装上の注意
details 要素はキーボード操作や読み上げに標準で対応しているため、アクセシビリティ面で扱いやすいのが利点です。デフォルトの三角マーカーは list-style:none で消していますが、Safari など一部ブラウザでは別途 ::-webkit-details-marker の非表示が必要な場合があります。検索エンジンに FAQ として認識させたいときは、表示内容と一致する FAQPage の構造化データを併記すると効果的です。
よくある質問
details要素はJavaScriptなしで本当に動きますか。
動きます。details/summaryはブラウザ標準の開閉機能で、クリックやキーボード操作にも標準対応しています。JSが不要な分だけ軽く、読み上げ環境でも開閉状態が伝わるため、シンプルなFAQには最適です。
最初から1つだけ開いた状態にできますか。
できます。開いておきたいdetailsタグにopen属性を付けるだけです。ただし同時に複数を開いたままにするか1つずつ開くかは標準では制御できないため、排他開閉にしたい場合は少量のJSが必要です。