FAQ アコーディオンセクション

このパーツの使いどころと実装ポイント

このパーツは、質問をクリックすると答えが開閉するアコーディオン式のFAQです。質問は button 要素で作られ、aria-expanded 属性で開いているか閉じているかを示します。マークアップには dldtdd（説明リスト）を使い、質問と回答の対応関係を意味的に正しく表現しているのが特徴です。アイコンは開閉に合わせて回転します。

向いている場面

問い合わせを減らしたいサービス紹介ページや料金ページに向きます。たとえば「費用は？」「契約期間は？」といった定番の疑問が多い、Web制作・コンサル・サブスク・教室系のサイトで効果を発揮します。

カスタマイズと注意点

質問と回答のセットを増やすときは、button と回答の dd をひとまとめにして複製します。複数同時に開ける作りなので、関連する質問を並べやすいのも利点です。

• キーボードだけでも開閉できるよう button を使っており、アクセシビリティに配慮しています
• 回答内のリンクや改行は自由に入れられますが、長すぎる回答は読みにくいので簡潔にまとめましょう

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。