FAQ 2 列カード
質問と答えを 開閉せず常に全文表示 する2列カード型の FAQ です。 grid-template-columns:1fr 1fr で質問カードを2列に並べ、各カードは左に色つきの縦線（ border-left ）を持ち、見出しが質問、本文が答えという素直な構造です。
このパーツの使いどころと実装ポイント
質問と答えを開閉せず常に全文表示する2列カード型の FAQ です。grid-template-columns:1fr 1fr で質問カードを2列に並べ、各カードは左に色つきの縦線（border-left）を持ち、見出しが質問、本文が答えという素直な構造です。アコーディオンと違いクリック操作が要らず、すべての答えがその場で読めます。
向いている場面
質問数が4〜8件と少なめのサービス紹介ページ、サポートのトップ、料金ページの補足など、ユーザーに探す手間をかけさせたくない場面に向きます。納期・修正回数・保守・対応範囲といった、検討前に解消しておきたい疑問をまとめて見せるのに便利です。
カスタマイズと注意点
- 各答えは2〜3行に収め、カードの高さが揃うよう文量を調整します
- 質問数が多い場合は、開閉式（
details要素）の FAQ に切り替えた方が一覧性が保てます - 質問は実際に問い合わせの多い内容にすると、信頼にも問い合わせ削減にもつながります
スマートフォンでは2列を1列へ畳むと縦に長くなるため、本当に重要な質問へ件数を絞るか、答えを簡潔にまとめる工夫が読みやすさを保ちます。
よくある質問
開閉式の FAQ とどう使い分ければよいですか？
質問数が少なく、すべてを読ませたい場合は常時表示のこの型が向きます。質問が多くて縦に長くなる場合は、details 要素を使った開閉式にして一覧性を保つ方が快適です。閲覧端末や情報量に応じて選んでください。
カードの高さがバラついて見えます。揃えるには？
grid では同じ行のカードが自動で高さを揃えるため、隣り合うカードは揃います。それでも答えの文量に差があると間延びして見えるので、各回答を同じくらいの行数にまとめるのが確実です。長い回答は要点を絞ると整います。