CSSカードデザイン20選｜ホバー演出つきコピペコード集
生徒記事一覧や実績紹介のカードが、なんだか野暮ったく見えてしまいます…。何を変えればいいですか？
ペン博士カードは影・余白・角丸・ホバーの4点で印象が決まるよ。今日はベースの作り方から、そのまま使えるデザイン20種類まで一気に渡すね。
記事一覧、実績紹介、料金プラン、スタッフ紹介。Webサイトで最も多く登場するパーツがカードです。使用頻度が高いぶん、少しの粗が全体の印象を下げます。
逆に言えば、カードの完成度を上げるだけでサイト全体が引き締まります。ポイントは装飾を足すことではなく、余白・影・角丸・ホバーの4要素を整えることです。
この記事では、崩れないカードの土台作りから、シャドウ系・ボーダー系・画像付き・横並びなど20種類のデザインを紹介します。すべてコピペで動く形にしてあります。
- カードの基本構造とグリッド配置
- 高さを揃えて崩れなくする方法
- シャドウ系カード5種
- ボーダー・アクセント系カード5種
- 画像付きカード5種（ホバー演出つき）
- 横並び・リスト型カード5種
- ホバー演出のパターンと使い分け
- ダークモード対応の考え方
- パフォーマンスと実装上の注意
- よくある崩れの原因と対処
目次
カードの基本構造とグリッド配置
最後に、カードでつまずきやすい点をまとめます。
| 症状 | 原因 | 対処 |
|---|---|---|
| 高さがバラバラ | flexの指定がない | 本文にflex-grow: 1 |
| ボタンの位置がずれる | 下端に寄せていない | margin-top: auto |
| 画像の比率が崩れる | 高さ指定がない | aspect-ratio＋object-fit |
| 角丸から画像がはみ出す | 親に切り抜き指定がない | overflow: hidden |
| 影が切れて見える | 親のoverflow | 影を持つ要素を外に出す |
| スマホで文字が詰まる | paddingが固定値 | 余白を相対値に変える |
どれも装飾ではなく構造側の指定です。土台のカードクラスに最初から入れておけば、個別対応はほとんど不要になります。
余白と文字組みの基準値
装飾より効くのが余白と文字の設計です。迷ったときの基準を置いておきます。
| 項目 | 推奨値 | 理由 |
|---|---|---|
| カード内側の余白 | 20〜28px | 文字と枠が近いと窮屈に見える |
| カード同士の間隔 | 20〜32px | 隣接カードとの境界を明確にする |
| タイトル | 1.15〜1.3rem・行間1.4 | 2行までに収まる長さが理想 |
| 本文 | 0.95rem・行間1.7 | 3行前後で切ると一覧性が保てる |
| 角丸 | 12〜16px | 画像の角丸と数値を揃える |
特に効くのがタイトルの行数を揃えることです。1行と3行のカードが混ざると、どれだけ影や角丸を整えても不揃いに見えます。文字数の上限を決め、超える場合は省略表示にします。
/* タイトルは2行、本文は3行で省略する */
.card__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.4;
}
.card__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
line-height: 1.7;
}行数を固定すると、文章量に関わらずカードの見た目が安定します。CMSで運用するサイトでは特に効果があります。
実装前チェックリスト
公開前に次の6点を確認してください。ここを通せば、ほとんどの崩れは事前に潰せます。
- 文章量が最も多いカードと最も少ないカードを並べて確認したか
- 画像が縦長・横長どちらでも比率が崩れないか
- タイトルが長いときに2行で省略されるか
- キーボードのTabキーでリンクに到達でき、位置が見えるか
- スマホ幅（375px）で余白と文字が窮屈になっていないか
- ダークモードでカードの境界が消えていないか
チェックは実データの最長・最短で行うのが鉄則です。ダミーテキストだけで確認すると、公開後に必ず崩れます。
まとめ
カードは影・余白・角丸・ホバーの4要素で印象が決まります。グリッドはrepeat(auto-fit, minmax(280px, 1fr))で列数を自動化し、カード内部はFlexboxで本文にflex-grow: 1、リンクにmargin-top: autoを当てれば高さが揃います。影は薄く広く、ホバーは0.25秒前後の控えめな動きに留めるのが上品です。画像はaspect-ratioとobject-fit: coverで比率を固定し、カード全体をリンクにするときは擬似要素を広げる方法を選んでください。
よくある質問（FAQ）
カードの高さを揃えるにはどうすればいいですか？
カードをdisplay: flex; flex-direction: column;にして、本文にflex-grow: 1、最下部のボタンにmargin-top: autoを指定します。グリッドの各セルはもともと同じ高さに伸びるため、この2行でボタン位置まで揃います。
グリッドの列数をレスポンシブに変えるには？
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))と書けば、画面幅に応じて自動で列数が変わります。メディアクエリは不要です。最小幅の値を変えると、折り返すタイミングを調整できます。
カード全体をクリックできるようにする方法は？
タイトル内のリンクに::afterを作り、position: absolute; inset: 0;でカード全面へ広げます。カード自体をaタグで囲む方法は、読み上げ時にカード内の全テキストが1つのリンク名として読まれるため推奨されません。
ホバー演出はスマホでも必要ですか？
タッチ端末にホバー状態はないため、演出は基本的に発火しません。重要な情報をホバーでしか出さない設計は避け、常時表示にしてください。:focus-withinを併記しておくと、キーボード操作にも対応できます。
影が薄くて見えない、逆に濃すぎる場合は？
rgbaの透明度を0.08〜0.15の範囲で調整してください。単一の濃い影より、近い影と遠い影を重ねる二重シャドウのほうが自然に見えます。ダークモードでは影が機能しないため、境界線で代替します。
あわせて読みたい関連記事
- scroll-snapで作る横スクロールUI｜カルーセルをCSSだけで実装
- box-shadowの使い方｜影で立体感を出すコピペ集
- CSSで画像ホバー時にズームさせる方法
- border-radiusの使い方｜角丸を自在に操るコピペ集
CSS・Webデザイン実装の総まとめ
CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。
AIスキルで、未来の自分をアップデート！
今なら完全無料でAIを学べる！
- 動画や実践で楽しく学べる：初心者でも安心のカリキュラム
- スマホ・PCどちらでもOK：好きな時間に学習できる
- 料金は一切ナシ：0円でAIスキルが身につく
目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。
会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！
