6マスアイコンサービス
「6マスアイコンサービス」は、アイコン・見出し・短い説明をひとまとめにしたカードを 3 列 2 段、計 6 マスで並べるサービス一覧です。 display:grid と grid-template-columns:repeat(3,1fr) で均等な列を作り、各カードは白背景にやわらかい影を付けて浮かせています。
このパーツの使いどころと実装ポイント
「6マスアイコンサービス」は、アイコン・見出し・短い説明をひとまとめにしたカードを 3 列 2 段、計 6 マスで並べるサービス一覧です。display:grid と grid-template-columns:repeat(3,1fr) で均等な列を作り、各カードは白背景にやわらかい影を付けて浮かせています。アイコンはインライン SVG で描かれているため、外部のアイコンフォントを読み込まなくても単体で表示できます。
向いている場面
制作会社の「できること」一覧、士業事務所の取扱業務、アプリの機能紹介など、6 つ前後の項目を同じ重みで見せたい場面に向きます。数が揃っているとグリッドが整然と見え、サービスの幅広さを一目で伝えられます。
カスタマイズと注意点
- SVG の
fillはcurrentColorなので、文字色を変えればアイコン色も連動します。色を統一すると洗練された印象になります。 - 項目数を変える場合は 3 で割り切れる数（6・9 など）にすると最終行が欠けません。
- レスポンシブは
max-width:600pxで 2 列へ切り替わる指定済みです。説明文を増やしすぎるとカードの高さが揃わなくなるため、文量はそろえると見栄えが安定します。
よくある質問
アイコンを別のものに差し替えられますか？
各カードのインラインSVGのpath部分を別のアイコンのデータに置き換えれば変更できます。fillがcurrentColorなので、文字色のCSSを変えるだけでアイコン色もまとめて変わります。
サービスが6個より多い・少ない場合は？
カードのdivを増減すれば対応できます。3列レイアウトなので、3の倍数（6や9）にすると最終行が中途半端に欠けず、見た目が整います。