2 カラム 罫線 FAQ

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

この「2 カラム 罫線 FAQ」は、よくある質問と回答を 2 列のグリッドに並べ、各項目を下罫線で区切って読みやすく見せるパーツです。grid-template-columns:1fr 1fr の 2 列構成で、各セルは <h3> の質問と <p> の回答を持ち、border-bottom:1px solid で項目どうしの境界を示します。アコーディオンのような開閉はなく、回答が常に見えている「全表示型」なのが特徴です。

向いている場面

料金・解約・サポート・トライアルなど、質問数が多く回答も短いサービスに向きます。SaaS の料金ページ、サブスク、スクールの募集ページなど、ユーザーが横断的に確認したい情報を一望させたい場面に適します。回答が常時見えるため、検索で来た人がすぐ答えにたどり着けるのも利点です。

カスタマイズと注意点

• 回答が長い質問が混ざると 2 列の高さがそろわず凹凸が出ます。回答は短文でそろえると整います。
• 件数は偶数（2・4・6…）にすると左右が均等になります。
• クリックで開閉したい場合は <details> 要素への置き換えを検討してください。常時表示はインデックスされやすい反面、項目が増えると縦に長くなります。
• スマホでは 720px 以下で 1 列になります。