4 列アイコンサービス紹介
このパーツは、アイコン・小見出し・短い説明文をひと組にしたカードを横 4 列で並べた、コーポレートサイトのサービス概要セクションです。レイアウトは display:grid と grid-template-columns:repeat(4,1fr) による等幅 4 カラムで、画面幅が 760px 以下になると re…
このパーツの使いどころと実装ポイント
このパーツは、アイコン・小見出し・短い説明文をひと組にしたカードを横 4 列で並べた、コーポレートサイトのサービス概要セクションです。レイアウトは display:grid と grid-template-columns:repeat(4,1fr) による等幅 4 カラムで、画面幅が 760px 以下になると repeat(2,1fr) へ切り替わり、スマートフォンでは 2 列に折り返します。アイコンは画像ではなくインライン SVG なので外部ファイルの読み込みが不要で、fill:currentColor により文字色と同じ色で表示されます。
向いている場面
提供サービスや強みを 4 つに整理して見せたいときに使えます。たとえば制作会社の「戦略・デザイン・開発・運用」、士業の「相談・診断・実行・サポート」、SaaS の主要機能 4 つの紹介などです。1 項目あたりの説明は 1〜2 文に収まるため、TOP ページの中盤に置く概要ブロックとして読み手の負担が少ないのが利点です。
カスタマイズの勘所
- 3 項目にしたいときは
repeat(4,1fr)をrepeat(3,1fr)に変えます。数が割り切れないと最終行が空くため、項目数とカラム数を合わせます。 - SVG の
pathを差し替えるだけでアイコンを変更できます。線で描かれたアイコンを入れる場合はfillではなくstroke指定が必要です。
アクセシビリティ面では、SVG が装飾なら aria-hidden="true" を付け、見出しは h3 として正しい階層に置くことで、スクリーンリーダーが項目名を読み上げられます。
よくある質問
アイコンを 4 つ以外の数にできますか。
できます。CSS の grid-template-columns の repeat の数字を項目数に合わせて変えるだけです。3 列なら repeat(3,1fr)、6 列なら repeat(6,1fr) にします。割り切れない数だと最終行に空きが出るので、列数と項目数をそろえると見た目が整います。
アイコンに好きな画像を使えますか。
使えます。インライン SVG の path を差し替えるのが軽量でおすすめですが、PNG や WebP の画像に置き換えることもできます。その場合は img タグに width と height を指定し、alt を空にするか意味のある説明を入れてください。