3カラムアイコンカードサービスセクション
アイコン・タイトル・説明文・テキストリンクを1組にした サービス紹介カードを3カラム で並べたセクションです。アイコンは外部フォントに頼らず viewBox="0 -960 960 960" の インラインSVG （Material Symbols系のパス）で描かれ、 fill:currentColor で文字色に…
このパーツの使いどころと実装ポイント
アイコン・タイトル・説明文・テキストリンクを1組にしたサービス紹介カードを3カラムで並べたセクションです。アイコンは外部フォントに頼らず viewBox="0 -960 960 960" のインラインSVG（Material Symbols系のパス）で描かれ、fill:currentColor で文字色に追従します。カードは grid の等幅3カラムで、ホバーすると浮き上がる定番のインタラクションを備えます。見出し上に小さなラベル（Services）を添えて階層を作っています。
向いている場面
- コーポレートサイトの「提供サービス」「事業内容」紹介
- 3つの強みや機能を並列で見せたいLP
- 制作・コンサル・士業など無形サービスの可視化
カスタマイズの勘所
サービスが多いときはカードを複製して4列や2行に増やせます。アイコンを差し替える際は path のデータを別のSVGに置き換えるだけでよく、線で描くアイコンを使う場合は枠側のCSSを fill:none;stroke:currentColor に合わせないと表示されない点に注意してください。説明文は 2〜3行に収めると3枚の高さがそろい、見た目が整います。アクセシビリティ面では装飾アイコンに aria-hidden="true" を付け、リンクは「詳しく見る」だけでなくサービス名を含めると、リンク一覧で読んだときに行き先が分かります。
よくある質問
アイコンを別のものに変えたいときは？
各カードのSVG内のpathデータを差し替えれば変更できます。Material SymbolsなどのSVGアイコンを使い、塗りで描くタイプならfill:currentColorのまま、線で描くタイプなら枠のCSSをfill:none;stroke指定に合わせると正しく表示されます。
サービスを4つ以上にしたい場合は？
service-card のブロックを複製して追加します。列数を増やすならgridの列指定を4列にし、項目が多いときは1行3〜4枚で折り返すと各カードの高さがそろい、説明文の行数を統一すると並びが整います。