6 カードのサービスメニュー
アイコン・タイトル・概要をひとまとめにしたカードを、 grid-template-columns:repeat(3,1fr) で 3列×2段の計6枚 並べたサービス一覧です。各カードは a 要素でリンク化され、ホバー時に translateY で浮き上がり、枠線と影が付くインタラクションを備えています。
このパーツの使いどころと実装ポイント
アイコン・タイトル・概要をひとまとめにしたカードを、grid-template-columns:repeat(3,1fr) で3列×2段の計6枚並べたサービス一覧です。各カードは a 要素でリンク化され、ホバー時に translateY で浮き上がり、枠線と影が付くインタラクションを備えています。サービスや特長を一覧で見渡せるのが利点です。
向いている場面
コンサルや士業の業務一覧、SaaS の機能まとめ、クリニックの診療科目、店舗のメニュー紹介など、同格の項目を6つ前後並べたいページに最適です。各カードを下層ページへのリンクにすれば、サイト内の回遊導線にもなります。
カスタマイズの勘所
- アイコンはインライン SVG（
fill:currentColor）。各サービスを表す意味のある図柄を選びます - カード内の文字量は揃えて、高さのデコボコを防ぎます
- 項目数が6でなくても、3列・2列・1列と段組みを切り替えれば対応できます
カード全体をリンクにする場合、装飾アイコンには aria-hidden を付け、テキストでリンク先が伝わるようにすると、スクリーンリーダーでも内容が理解できます。
よくある質問
カードの数が6つでない場合はどうしますか？
grid の列数は固定でも、項目を増減すれば自動で段が増減します。4つや9つでも自然に並びます。半端な数で最終行が空く場合は、列数を変えるか、余ったカードを中央寄せにすると見た目のバランスが整います。
各カードの高さがバラバラになるのを防ぐには？
grid のセルは行内で高さが揃うため、隣り合うカードは自動で同じ高さになります。それでも文字量に大きな差があると見栄えが悪くなるので、概要文の長さをおおよそ揃えるのが確実です。タイトルも改行数を近づけると安定します。