3 カラム機能訴求セクション
3 カラム機能訴求セクションは、番号やアイコン入りの小箱・タイトル・説明文を 1 セットにして横に 3 つ並べる、サービスの強みを整理する LP の定番レイアウトです。並びは grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) で組まれ、幅が足りなくなる…
解説
3 カラム機能訴求セクションは、番号やアイコン入りの小箱・タイトル・説明文を 1 セットにして横に 3 つ並べる、サービスの強みを整理する LP の定番レイアウトです。並びは grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) で組まれ、幅が足りなくなると自動で 2 列・1 列に折り返します。各カードは白背景に薄い影（box-shadow）を載せ、上部のアイコン枠は等幅フォントの番号で統一感を出しています。JavaScript は使わず CSS だけで完結します。
使いどころ
- 「速い・軽い・使いやすい」のような特徴 3 点を訴求するトップページ
- サービスの導入ステップや提供価値の整理
- 料金プランや機能比較の前段にある概要ブロック
項目は中身（番号箱・見出し・説明）をコピーするだけで 4 つ・6 つに増やせます。番号の代わりにインライン SVG アイコンを入れると、より具体的に伝わります。カードの角丸・影・背景色を変えればブランドに馴染ませられます。1 列に詰まったときに窮屈にならないよう、minmax の最小幅と gap のバランスを確認してください。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
3つではなく4つや6つの特徴に増やせますか？
増やせます。カード1枚分のブロックをコピーして追加するだけで、auto-fit のグリッドが要素数に合わせて自動で折り返します。CSS を書き換える必要はありません。
番号の代わりにアイコンを使えますか？
はい。アイコン枠の中の数字を、インラインSVGアイコンや文字に置き換えられます。スニペットは自己完結が前提なので、外部フォントよりSVGを直接入れる方が安全です。