アイコンスタック型バッジカード
このカードは、丸いアイコンをカード本体の上辺から半分はみ出させて配置するデザインです。仕組みはシンプルで、カードに position:relative を、アイコン枠に position:absolute と top:-32px 、 left:50% 、 transform:translateX(-50%) を組み…
解説
このカードは、丸いアイコンをカード本体の上辺から半分はみ出させて配置するデザインです。仕組みはシンプルで、カードに position:relative を、アイコン枠に position:absolute と top:-32px、left:50%、transform:translateX(-50%) を組み合わせ、上にはみ出した分だけカード本体の上パディングを広げて文字と重ならないようにしています。アイコンの円は linear-gradient で塗り、box-shadow で浮かせて視線を集めます。JavaScript は不要で、CSS だけで完結します。
使う場面
- サービスの機能を 3 つ並べるフィーチャー一覧
- 受賞歴や継続率などの実績ハイライト
- 料金プランの特典を 1 枚で見せるカード
カスタマイズは top の値とカードの上パディングを必ずセットで調整するのがコツです。片方だけ変えるとアイコンが文字に重なります。アイコンの円のサイズを変えたら、はみ出し量も合わせて見直してください。配色はグラデーションの 2 色を差し替えるだけでブランドに馴染みます。アイコンには aria-hidden が付いているため、意味のある情報は必ず見出しや本文のテキスト側に書いてください。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
アイコンの色を変えるには？
アイコン枠の背景に指定された linear-gradient の 2 色を、自社ブランドの色に書き換えてください。影の色も rgba で同系色にすると一体感が出ます。アイコン自体は currentColor で描かれているため、枠の color を変えると線の色も変わります。
アイコンが見出しの文字と重なってしまいます。
カード上部のパディング（padding-top）と、アイコンを上にずらす top の値のバランスが崩れています。アイコンを大きくした場合は、その分カードの上パディングも増やして、はみ出した円が文字にかからないようにしてください。