サービス紹介カード（アイコン付き）
アイコン・タイトル・説明文を縦に積んだ サービス紹介カード です。提供する価値の柱を3つ並べて見せるときに使う、コーポレートサイトやサービス LP の定番セクション部品です。 装飾も動きも CSS のみ で完結しており、JavaScript は不要です。
解説
アイコン・タイトル・説明文を縦に積んだサービス紹介カードです。提供する価値の柱を3つ並べて見せるときに使う、コーポレートサイトやサービス LP の定番セクション部品です。
装飾も動きも CSS のみで完結しており、JavaScript は不要です。カードは白背景に border-radius:16px と控えめな box-shadow で柔らかい立体感を出しています。ホバー時には transform:translateY(-4px) でわずかに浮き上がり、影を強めることで「触れる」印象を与えます。アイコン枠は淡いグラデーション背景の角丸ボックスで、中央にインライン SVG を place-items:center で配置しています。アイコンが外部フォントに依存しないため単体で確実に表示されます。
使う場面とカスタマイズ
- 「企画・制作・運用」などサービスの3本柱を並べるセクション
- 機能紹介や強みの一覧、料金前のメリット提示
- アイコン枠のグラデーション、影の濃さ、ホバーの浮き量を調整
3枚並べるときは grid や flex のコンテナに入れ、高さをそろえると整います。article と h3 を使った意味のある構造なので SEO とアクセシビリティに有利です。アイコンは装飾なら aria-hidden、意味を持つなら代替テキストを添えて使い分けます。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
カードを3枚横並びにするには
このカードを囲む親要素にdisplay:gridかflexを指定し、gapで間隔を取ります。grid-template-columnsをrepeat(3,1fr)にすれば均等3列になり、狭い画面では1列に折り返すようメディアクエリを足すと安全です。
アイコンを別のものに差し替えられますか
はい。アイコン枠の中のSVGを好きなインラインSVGに置き換えるだけです。サイズはfont-sizeやwidth/heightで合わせます。外部アイコンフォントに頼らずインラインで入れると、単体でも確実に表示されます。