アイコングリッド サービス一覧
アイコングリッド サービス一覧は、 SVGアイコン・タイトル・短い説明文 をまとめたカードをグリッドに並べたパーツです。このサンプルは grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) を使い、画面幅に応じてカードの列数が自動で増減します。
このパーツの使いどころと実装ポイント
アイコングリッド サービス一覧は、SVGアイコン・タイトル・短い説明文をまとめたカードをグリッドに並べたパーツです。このサンプルはgrid-template-columns:repeat(auto-fit,minmax(200px,1fr))を使い、画面幅に応じてカードの列数が自動で増減します。各カードはホバーで浮き上がる演出が付き、内容を一目で比較できます。
向いている場面
制作会社やコンサル、店舗など「提供メニューが3〜6個ある」サービス紹介に向きます。料金や工程の前段で、何を提供しているかをアイコンで直感的に伝えたい場面に適しています。
カスタマイズと注意点
アイコンは外部フォントに頼らずインラインSVGで埋め込まれており、fill:currentColorで文字色に追従します。差し替える際はviewBoxを揃え、装飾目的のアイコンにはaria-hidden="true"を付けます。カード数はarticleの増減で調整でき、auto-fitのおかげで端数があっても自然に並びます。説明文は長すぎるとカードの高さが揃わないため、文字数の粒度を合わせると整然と見えます。
よくある質問
カードの列数はどう決まりますか
CSS Gridのauto-fitとminmaxにより、画面幅に応じて自動で決まります。最小200pxを下回らない範囲でできるだけ多く並ぶため、PCでは横並び、スマホでは縦積みに自然と切り替わります。
アイコンを別のものに差し替えられますか
可能です。各カードのSVGを入れ替えるだけで変更できます。viewBoxの座標系を揃え、塗りで描くアイコンを選ぶと既存のfill:currentColorの指定がそのまま効いて色が崩れません。