特徴 4 アイコングリッド
このパーツは、アイコンと見出しと 1 行の説明を 1 セットにして横 4 列に並べる「特徴グリッド」です。 grid-template-columns:repeat(4,1fr) で 4 等分し、各カラムは text-align:center で中央寄せにしています。
このパーツの使いどころと実装ポイント
このパーツは、アイコンと見出しと 1 行の説明を 1 セットにして横 4 列に並べる「特徴グリッド」です。grid-template-columns:repeat(4,1fr) で 4 等分し、各カラムは text-align:center で中央寄せにしています。アイコンは外部フォントに依存しないインライン SVG を使い、fill:currentColor で文字色に追従するため、配色を変えてもアイコンが自動でなじむのが利点です。
向いている場面
サービスの強みを一目で見渡したいときに向きます。SaaS のランディングページで「高速・安全・連携・サポート」の 4 軸を見せる、コンサルティング会社で提供価値を整理する、製品ページで機能の概要を俯瞰させる、といった用途です。説明文を 1 行に絞っているので、詳細は別セクションに譲り、ここは入口として機能します。
カスタマイズの勘所
- 各ブロックの
<svg>を差し替えれば別のアイコンになります。fill:none;stroke:系のアイコンを入れる場合はfill:currentColorに直さないと表示されません。 - 項目数を 3 や 6 にしたいときは
repeat()の数値を変えます。
実装上は、4 列は情報を詰め込みすぎないことが肝心です。説明文が長いと折り返して高さがバラつくため短く保ちます。レスポンシブでは max-width:720px で 2 列に折り返す指定が入っており、スマートフォンでも横スクロールせずに読めます。装飾の絵文字ではなく SVG を使う設計なので、OS による表示崩れも起きません。
よくある質問
アイコンは何を使っていますか
Google Material Symbols をインライン SVG として埋め込んでいます。Web フォントの読み込みが不要で、各ページ単体で完結するのが特徴です。fill:currentColor を指定しているため、テキストの色を変えるとアイコンの色も一緒に変わります。
列数を 4 から変えられますか
変えられます。CSS の grid-template-columns:repeat(4,1fr) の 4 を 3 や 6 に書き換えるだけです。あわせて中身のブロック数も増減してください。スマートフォン向けには 2 列に折り返す指定がすでに入っています。