サイト制作
HTMLのdetails・summaryでFAQを作る方法｜開閉とopen属性の注意点
2026-10-29
この記事には広告・アフィリエイトリンクが含まれます。
detailsで開閉する範囲を囲み、最初の子にsummaryの質問文を置くと、HTMLで折りたたむFAQを作れます。open属性は値をfalseにしても開くため、閉じるには属性を外します。ラベルとキーボード操作も確認しましょう。
details内の最初にsummaryの質問文を配置
MDNは、detailsを内容の表示・非表示を切り替える折りたたみ要素、summaryをその概要やラベルを示す要素として説明しています。summaryはdetailsの最初の子に置きます。
FAQなら、「詳細」だけより「配送には何日かかりますか？」のように、開いた先の内容がわかる文にするほうが探しやすそうです。同じラベルが何個も並ぶと、知りたい答えを探すために一つずつ開くことになります。
閉じるにはopen属性自体を外す
detailsのopenは論理属性です。属性が存在すれば開いた状態になるため、open="false"と書いても閉じた状態にはなりません。閉じておきたいときは、open属性自体を外します。見た目の開閉アイコンを変える場合も、操作できる場所や開閉状態が伝わるようにしたいですね。標準要素を使えば、装飾後の確認が不要になるわけではありません。フォーカスの表示を消してしまわないことも大切です。
キーボードと支援技術で開閉を確認
MDNでは、フォーカスした状態でスペースキーを押す操作も説明されています。実装したらキーボードで移動して開閉できるか、利用するブラウザーや支援技術でラベルが伝わるかを確認しましょう。
開く前の質問と開いた後の答えを点検
まずマウスや指で開閉し、次にキーボードで見出しへ移動して操作します。最後に、答えを開いた状態で文字やリンクが読みやすいかを確かめます。開けることだけでなく、閉じた状態で何の質問か分かることも確認したい点です。
長い利用条件をすべて折りたたむと、読む必要がある人に気づいてもらえない場合があります。最初に伝える要点を表示し、補足を開けるようにする。HTMLの仕組みが簡単だからこそ、見せる順番は丁寧に考えたいですね。
