アイコンカード3列フィーチャー
Material Symbolsのインラインアイコンを添えた3枚のカードで、自社の強みや特徴を並べるフィーチャーセクションです。レイアウトはCSS gridの repeat(3,1fr) で等幅3列に組み、各カードはホバーで translateY によりわずかに浮き上がり、影が深くなります。
このパーツの使いどころと実装ポイント
Material Symbolsのインラインアイコンを添えた3枚のカードで、自社の強みや特徴を並べるフィーチャーセクションです。レイアウトはCSS gridのrepeat(3,1fr)で等幅3列に組み、各カードはホバーでtranslateYによりわずかに浮き上がり、影が深くなります。アイコンは丸角の色付き枠に収め、見出しと短い説明文を続ける素直な構成です。
向いている場面
- 「選ばれる3つの理由」のように要点を3つに整理したいサービス紹介
- 機能や提供価値を横並びで見比べさせたいSaaSのトップ
- 制作会社・士業などで強みを端的に伝えたい会社紹介
カスタマイズと注意
差し替えは各カードのアイコン・見出し・本文の3点が中心です。アイコンはインラインSVGなので、外部フォントに頼らず単体で完結します。色を変えるときは枠の背景とfill:currentColorのセットで管理すると統一感が崩れません。説明文の長さはカードごとに大きく差をつけず、高さの揃いを保ちます。モバイルでは1列に積み上がるので、重要なカードを先頭に置くと読み順が自然になります。アイコンは装飾ならaria-hiddenを付け、意味は見出しと本文のテキストで伝えます。
よくある質問
カードを4枚や6枚に増やせますか？
増やせます。gridのrepeat(3,1fr)はそのままでも、3の倍数なら行が綺麗に揃います。中途半端な枚数のときは最終行の余りカードが左寄せになるため、枚数を3の倍数に調整するか、最終行を中央寄せにすると整います。
アイコンの色を変えると見えなくなりました。
Material Symbolsは塗り（fill）で描くアイコンです。枠側のCSSがfill:noneやstroke前提だと不可視になるため、fill:currentColorに直し、文字色を変えるとアイコンの色も追従します。