FAQアコーディオンセクション
このパーツは、質問をクリックすると回答が開くアコーディオン形式のFAQです。マークアップは dl ・ dt ・ dd を使い、質問と回答の対応を意味的に正しく表現しています。開閉のアニメーションは max-height を0から一定値へ広げる方式で、右端のプラス記号は ::after の擬似要素で描き、開いた状態で…
このパーツの使いどころと実装ポイント
このパーツは、質問をクリックすると回答が開くアコーディオン形式のFAQです。マークアップはdl・dt・ddを使い、質問と回答の対応を意味的に正しく表現しています。開閉のアニメーションはmax-heightを0から一定値へ広げる方式で、右端のプラス記号は::afterの擬似要素で描き、開いた状態ではrotate(45deg)で×印に近い形へ回転します。装飾アイコンを画像で持たないため軽量です。
向いている場面
- コーポレートサイトやLP下部のよくある質問
- 料金・納期・サポートなど、問い合わせ前の不安をまとめて解消したい場面
- 項目数が多く、初期状態では畳んでおきたいヘルプ
カスタマイズの勘所
項目を増やすにはfaq__itemのブロックを足すだけです。回答が長い項目がある場合、開いたときの高さ上限（max-height:200px）に収まらないと途中で切れることがあるので、長文の項目ではこの値を引き上げてください。プラス記号や下線の色はブランドカラーに合わせて変更できます。
実装上の注意
質問はクリックで開閉するため、キーボードでも開閉でき、開閉状態が支援技術に伝わるようにしておくと親切です。FAQは検索でも拾われやすい情報なので、実際によく聞かれる質問を、結論から簡潔に答える形で書くと役立ちます。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
回答が長いと途中で切れてしまうのはなぜですか?
開いたときの高さがmax-height:200pxで制限されているためです。長い回答を入れる項目では、この値を回答が収まる十分な大きさに引き上げてください。すべての項目で一律に大きくしすぎると閉じる動きがぎこちなくなるので、必要な項目だけ調整するのがおすすめです。
最初からいくつかの質問を開いた状態にできますか?
できます。開いた状態を表すfaq__item--openクラスを、初期状態で開いておきたい項目に付けておけば、ページ表示時から回答が見えます。よく見られる質問だけ最初から開いておくと、利用者がすぐ答えにたどり着けます。