アイコン付きサービスカードグリッド
このパーツは、SVGアイコン・タイトル・説明をひとまとめにしたサービス紹介カードを並べるグリッドです。レイアウトはCSS Gridの repeat(auto-fit, minmax(200px,1fr)) を使い、画面幅に応じてカード数が自動で3列・2列・1列と変化します。
このパーツの使いどころと実装ポイント
このパーツは、SVGアイコン・タイトル・説明をひとまとめにしたサービス紹介カードを並べるグリッドです。レイアウトはCSS Gridの repeat(auto-fit, minmax(200px,1fr)) を使い、画面幅に応じてカード数が自動で3列・2列・1列と変化します。アイコンはGoogle Material Symbols由来のインラインSVGで、fill: currentColor によって文字色と同じ色で描かれるため、配色変更にも追従します。カードにはホバーで少し浮き上がる動きを付け、操作できることを直感的に伝えます。
向いている場面
- 提供サービスを3〜6個に整理して見せたい事業サイト
- 機能や強みをアイコンで一覧化したいSaaS・アプリ紹介
- 診療科目・メニュー・対応領域を並べたいページ
1枚ずつが独立しているため、サービスの増減にも柔軟に対応できます。
カスタマイズと注意
アイコンを差し替えるときは、線画ではなく塗りで描くMaterial Symbolsを使うのがこのパーツの前提です。枠側CSSが fill:none;stroke:... の線アイコン用になっているとアイコンが見えなくなるため、fill: currentColor に直してください。アイコンに絵文字を使うのはOS依存で崩れやすいので避けます。実装上の注意として、auto-fit は1列になったときカードが横に伸びすぎることがあるので、最大幅や中央寄せで間延びを防ぐと整います。各SVGには aria-hidden="true" を付け、意味はタイトルテキストで伝えるとアクセシビリティが保てます。
よくある質問
アイコンはどこから持ってくればよいですか？
Google Material Symbols のアウトライン版が扱いやすく、商用利用やクレジット表記の制約も緩やかです。塗りで描く形式なので、枠側のCSSを fill:currentColor に合わせると正しく表示されます。絵文字はOSで見え方が変わるため避けてください。
カードの列数を固定したいのですが可能ですか？
可能です。標準は auto-fit で自動的に列数が変わりますが、常に3列にしたい場合は grid-template-columns を repeat(3,1fr) のように固定し、スマホ向けにメディアクエリで1〜2列へ切り替える形にしてください。