アイコン付きサービスカード
「アイコン付きサービスカード」は、 SVGアイコン・タイトル・説明文の3点 をまとめたカードを横3列で並べるサービス紹介です。Grid の repeat(3,1fr) で3カラムに整列し、各カードはホバーで少し浮き上がり影が強まる動きが付きます。
このパーツの使いどころと実装ポイント
「アイコン付きサービスカード」は、SVGアイコン・タイトル・説明文の3点をまとめたカードを横3列で並べるサービス紹介です。Grid の repeat(3,1fr) で3カラムに整列し、各カードはホバーで少し浮き上がり影が強まる動きが付きます。アイコンは外部フォントに頼らずインラインSVGで埋め込まれているため、このパーツ単体でそのまま動きます。
向いている場面
- 制作・開発会社のサービスメニュー
- 士業やコンサルの提供領域の一覧
- アプリやツールの主要機能の紹介
アイコンは Material Symbols 系の図形を fill:currentColor で塗っているので、文字色を変えればアイコンの色も連動します。サービス数を変えるときは、カードを増減しつつ repeat() の列数を見直すと、4列や2列にも展開できます。
実装上の注意
装飾目的のSVGには aria-hidden="true" を付け、読み上げの邪魔をしないようにしています。差し替えるアイコンが線画前提のものだと、枠側のCSSが fill で塗る設計のため見えなくなることがあります。塗りで描くアイコンを選ぶか、CSSの塗り・線の指定を合わせるのが安全です。3列は狭い画面では窮屈になるので、1〜2列へ折り返す調整を入れましょう。
よくある質問
アイコンの色を変えられますか
変えられます。アイコンは fill:currentColor で塗っているので、カードの文字色を変えるとアイコンの色も一緒に変わります。個別に変えたい場合は、そのアイコンを囲む要素の color を指定してください。
サービスを4つ以上に増やせますか
増やせます。カードを追加し、グリッドの列数を指定している repeat() の値を4などに変更してください。数が多いときは画面幅に応じて2列や1列へ折り返すようにすると、スマホでも読みやすくなります。