コピペで使えるCSSカードデザイン集

記事の一覧、作品の紹介、プロフィール——内容をひとかたまりにして見せるカードは、現代のWebデザインでいちばん出番の多い部品です。この記事は、そのまま使えるカードのデザインを動くデモつきで8個まとめました。コピペして、文章と画像を差し替えるだけです。

基本の型

基本のカード

白背景＋角丸＋うすい影。この3点セットだけで、内容が「ひとかたまり」に見えます。すべてのカードの出発点です。

.card {
  width: 280px;
  padding: 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

影は「うすく・大きくぼかす」が今風。rgba(0, 0, 0, 0.1)のような、うすい（不透明度を下げた）黒を使うと、背景色が変わっても自然になじみます。最後の0.1が濃さで、数字が小さいほどうすくなります。

画像つきカード（ブログ記事風）

上に画像、下に文章——ブログの記事一覧でおなじみの形です。画像がカードの角からはみ出さないよう、カード側にoverflow: hiddenをかけるのがコツです。

.card {
  overflow: hidden;   /* 画像を角丸の内側におさめる */
}
.thumb {
  height: 140px;
}

自分のサイトで使うときは、<div class="thumb">を<img class="thumb" src="…">に差し替えて、CSSをこう足します。どんな縦横比の写真でもきれいに収まります。

img.thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;   /* 縦横比を保ったまま、はみ出しを切る */
  display: block;
}

object-fit: coverは「枠を埋めるように拡大して、はみ出た部分を切る」指定。写真がつぶれたり伸びたりしなくなります。

ホバーで動かす

ふわっと浮くカード

マウスを乗せると持ち上がって影が深くなる、カードのホバーでいちばん人気の動きです。「押せますよ」の合図になります。

.lift {
  transition: transform 0.25s, box-shadow 0.25s;
}
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

浮かせる距離は数pxで十分。動かしすぎると、うるさい印象になります。

画像がズームするカード

写真の部分だけがゆっくり拡大します。作品ギャラリーや旅行ブログなど、写真が主役のサイトにぴったりです。

.frame {
  overflow: hidden;   /* 拡大した分をはみ出させない */
}
.zoom {
  transition: transform 0.4s;
}
.card:hover .zoom {
  transform: scale(1.08);
}

仕組みは「画像を額縁（overflow: hiddenの箱）に入れて、中身だけ拡大する」。はみ出た部分が隠れるので、カードの形は変わりません。

いろいろな形

横並びカード

左に画像、右に文章の横長カード。お知らせの一覧や、関連記事のリンクによく使われます。

.row {
  display: flex;
  align-items: center;
}
.thumb {
  width: 90px;
  height: 90px;
  flex-shrink: 0;   /* 画像がつぶれるのを防ぐ */
}

flex-shrink: 0が地味に大事。文章が長くなっても、画像がつぶれなくなります。

プロフィールカード

円形のアイコン＋名前＋ひとこと。自己紹介ページやメンバー紹介の定番です。

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;   /* 正方形を円にする */
}

border-radius: 50%で正方形が円になります。<img>を使うときも同じ指定でOKです。

色つきアクセントのカード

左端に色の帯を1本入れるだけで、「お知らせ」「注意」など種類分けができるカードになります。

.accent {
  border-left: 6px solid;
}
.orange { border-color: #ff8a3d; }
.green { border-color: #2ec46f; }

コツは、.accent側に色を書かないこと。太さと線の種類だけ決めておき、色は.orangeや.greenのような色クラスにまかせます。こうしておくと種類がいくつ増えてもCSSは1行ずつで済みます。帯の太さ（6px）を細くすると上品に、太くするとポップな印象になります。

並べてこそカード

カードをグリッドで並べる

カードは1枚より、きれいに整列してこそ真価を発揮します。display: gridなら、枚数が増えても勝手に折り返してくれる一覧が3行で作れます。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

minmax(140px, 1fr)は「1枚140px以上を保ちつつ、余った幅は均等に分ける」の意味。スマホでもPCでも、ちょうどいい列数に自動でなります。

影の濃さを使い分ける

box-shadowの数字は左から「横のずれ・縦のずれ・ぼかし・色」。浮かせたい高さに合わせて、3段階を使い分けると画面に統一感が出ます。

/* ひかえめ（一覧にたくさん並べるとき） */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

/* ふつう（この記事の基本形） */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

/* しっかり（目立たせたい1枚・ホバー時） */
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);

高く浮かせるほど「縦のずれ」と「ぼかし」を大きくするのがコツ。光が上から当たっている想像をすると、自然な影になります。

カード全体をリンクにする

記事カードは「どこを押しても記事にとべる」と親切です。カードの中身ごと<a>で包んで、リンクの下線と青色を打ち消します。

<a class="card-link" href="article.html">
  <article class="card">…カードの中身…</article>
</a>

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

color: inheritは「周りと同じ文字色を使う」。リンク特有の青色を、カードの中では出さないための1行です。

カードが変になるときのチェックリスト

• 画像が角丸からはみ出す → カード本体にoverflow: hiddenを入れましたか？
• カードの中の文字が全部青い → <a>で包んだらcolor: inheritとtext-decoration: noneを
• 横並びカードの画像がつぶれる → 画像側にflex-shrink: 0を
• 影が見えない・浮いて見えない → 背景が白だと、白いカードの影は目立ちません。ページ背景をうすいグレーやベージュにすると、カードが浮き立ちます

まとめ

1. カードの基本は白背景＋角丸＋うすい影の3点セット——影は「うすく、大きくぼかす」
2. ホバーの動き（浮く・画像ズーム）は押せる合図——動かす量はひかえめに
3. 並べるときはdisplay: grid＋auto-fillで、枚数が増えても崩れない一覧にする

まずは基本のカードをコピペして、自分の記事や作品の情報を流しこんでみてください。ページの完成度がひと目で変わります。