サービスアイコングリッドセクション

このパーツの使いどころと実装ポイント

このパーツは、アイコン・サービス名・短い説明をまとめたカードを並べたサービス一覧セクションです。グリッドはrepeat(auto-fit,minmax(200px,1fr))で組まれ、画面幅に応じてカードの列数が自動で増減します。アイコンはインラインSVGで描かれているため絵文字に頼らず、fill:currentColorで文字色に追従します。カードはホバーで少し浮き上がり、下線の色が変わる控えめな反応を持ちます。

向いている場面

• 提供メニューを一望させたいコーポレートサイト
• 機能や強みを3〜6個で整理したいサービスサイト
• 制作・士業・コンサルなどのメニュー紹介

カスタマイズの勘所

カードを増減するにはsvc__cardのブロックを足し引きするだけで、グリッドが列数を調整します。アイコンを差し替えるときは、線で描くアイコン素材を使う場合にfill:none;stroke系の指定が残っていると見えなくなることがあるため、塗りで描くSVGに合わせてfill:currentColorへ直すと確実です。説明文は各カードで長さをそろえると、行の高さが揃って整います。

実装上の注意

SVGにはaria-hidden="true"が付いており、意味はサービス名のテキストで伝える設計です。装飾アイコンに頼って文字を省略しないこと、ホバー効果はタッチ端末では効かないため、タップ可能であることが見た目で分かるようにしておくことが大切です。