アイコン特徴 3 列セクション
「3 つの選ばれる理由」のように、価値を大きなアイコンと短い説明で並べる特徴紹介セクションです。レイアウトは grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) で、画面幅に応じて 3 列が 1 列へ自然に折り返します。
解説
「3 つの選ばれる理由」のように、価値を大きなアイコンと短い説明で並べる特徴紹介セクションです。レイアウトは grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) で、画面幅に応じて 3 列が 1 列へ自然に折り返します。各カードは白背景に淡い影（box-shadow）を敷き、アイコンは円形の淡いグラデーション枠に inline-flex で中央寄せ。アイコンは外部フォントに依存しないインライン SVG なので、コピーした先でも崩れず自己完結します。
使う場面
- サービス LP 冒頭の「3 つの強み」「選ばれる理由」
- 料金プランの直前で価値を整理する導入ブロック
- 機能を端的に伝える SaaS のトップページ
項目数は div を増減すれば 2 列でも 4 列でも対応できます。アイコンは stroke="currentColor" で描かれているため、親の color を変えるだけで線の色を揃えられます。本文の line-height:1.85 は読みやすさのための余裕なので、文章が長い場合は文字数を削るか font-size を見直すと、3 枚の高さが揃って整って見えます。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
アイコンの色はどう変えますか。
SVGはstroke=currentColorで描かれているので、囲っているspanまたは親要素のcolorを指定すれば線の色が変わります。円形枠の背景はspanのbackgroundのグラデーションを書き換えてください。
特徴を4つや2つに増減できますか。
できます。グリッド内のdivを増やしたり減らすだけで、auto-fitが自動で列を組み直します。1行に並べたい個数に合わせてminmaxの最小幅（初期200px）も微調整するときれいに揃います。