アコーディオンFAQ
HTMLの details と summary だけで開閉する、JavaScript不要のアコーディオンFAQです。質問をクリックすると回答が開き、右端の矢印アイコンが [open] 状態に応じて回転します。各質問にはクエスチョンマークのアイコンが添えられ、開いた項目は枠色と影が変わって現在地が分かります。
このパーツの使いどころと実装ポイント
HTMLのdetailsとsummaryだけで開閉する、JavaScript不要のアコーディオンFAQです。質問をクリックすると回答が開き、右端の矢印アイコンが[open]状態に応じて回転します。各質問にはクエスチョンマークのアイコンが添えられ、開いた項目は枠色と影が変わって現在地が分かります。スクリプトに依存しないので、表示が軽く壊れにくいのが大きな利点です。
向いている場面
- サービスや料金ページの不安解消セクション
- 制作期間・費用・対応範囲など定番の質問をまとめたいBtoB
- JavaScriptを増やさず軽量に保ちたいランディングページ
カスタマイズと注意
質問と回答のテキストを差し替えるだけで使えます。最初に開いておきたい項目にはopen属性を付けます。矢印を回すsummaryのマーカーは::-webkit-details-markerを非表示にして自前のSVGに置き換えているので、ブラウザ標準の三角は出ません。detailsはキーボードやスクリーンリーダーに開閉が標準で伝わるため、アクセシビリティ面でも扱いやすい要素です。装飾アイコンにはaria-hiddenを付け、質問文は見出しのsummaryテキストで読み上げられるようにします。回答が長くなるときは段落を分け、行間を保って読みやすさを確保します。
よくある質問
JavaScriptなしで本当に開閉できますか？
できます。details/summaryはブラウザ標準で開閉する要素なので、スクリプトは不要です。矢印の回転もCSSのopen状態セレクタで実現しています。スクリプトが読み込めない環境でも崩れにくいのがこのパーツの強みです。
最初から特定の質問を開いた状態にできますか？
開いておきたいdetails要素にopen属性を付けるだけで、初期状態で展開されます。よく見られる質問を一つだけ開いておくと、訪問者に内容の見当が付きやすくなります。なお複数を同時に開いたままにもできます。