FAQ アコーディオン
FAQ アコーディオンは、質問をクリックすると その下に回答が開く 定番パーツです。このサンプルは dl （定義リスト）を土台に、質問を button 、回答を dd で構成し、 aria-expanded と aria-controls 、 hidden 属性で開閉と関連付けを管理しています。
このパーツの使いどころと実装ポイント
FAQ アコーディオンは、質問をクリックするとその下に回答が開く定番パーツです。このサンプルはdl（定義リスト）を土台に、質問をbutton、回答をddで構成し、aria-expandedとaria-controls、hidden属性で開閉と関連付けを管理しています。一つ開くと他が閉じる排他制御のため、画面が縦に伸びすぎません。
向いている場面
料金・納期・サポートなど、よくある疑問を一覧で答えたいコーポレートサイトやサービスページに向きます。問い合わせを減らしたい、購入前の不安を先回りして解消したい場面に効果的です。
カスタマイズと注意点
項目は質問と回答のペアを増減するだけで調整でき、buttonを使っているためキーボードでも操作できます。回答の文章は検索エンジンにも読まれるので、実際の質問文に近い言い回しで書くと拾われやすくなります。hiddenで隠すことで初期表示が軽くなりますが、回答テキスト自体はHTMLに存在するため内容は失われません。構造化データ（FAQPage）を併用すると検索結果での見え方を補強できます。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
アコーディオンで隠した回答は検索エンジンに読まれますか
読まれます。回答テキストはhidden属性で見た目を隠しているだけで、HTMLには最初から記述されています。そのため検索エンジンは内容を取得でき、表示の有無が情報の有無に直結することはありません。
一つ開くと他が閉じる仕様は変更できますか
できます。サンプルは他を閉じる排他制御ですが、JavaScriptを調整すれば複数同時に開く方式にも変えられます。項目が少なく一覧性を重視するなら排他、じっくり読ませたいなら複数開放が向いています。