CSSで作るカードUIデザイン集（レスポンシブ対応）

CSSで作るカードUIデザイン集（レスポンシブ対応）

カードUIは、情報を整理して視覚的に伝えるための重要なレイアウトパーツです。
ブログ・EC・ポートフォリオなど、あらゆるWebサイトで活用されています。

この記事では、コピペOKで使えるカードUIデザインを10パターン紹介し、さらにレスポンシブ対応のポイントも解説します。

カードUIデザイン10選

① シンプルカード

CSS
.card {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

② シャドウカード

CSS
.card {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  border-radius: 10px;
}

③ ホバー浮き上がり

CSS
.card {
  transition: transform .3s;
}

.card:hover {
  transform: translateY(-10px);
}

④ 画像付きカード

CSS
.card img {
  width: 100%;
  border-radius: 10px 10px 0 0;
}

⑤ オーバーレイテキスト

CSS
.card {
  position: relative;
}

.card-text {
  position: absolute;
  bottom: 0;
  color: #fff;
  padding: 15px;
}

⑥ グラデーションカード

CSS
.card {
  background: linear-gradient(45deg, #00f, #0ff);
  color: #fff;
}

⑦ ボーダー強調

CSS
.card {
  border: 2px solid transparent;
  transition: .3s;
}

.card:hover {
  border-color: #333;
}

⑧ フレックス配置

CSS
.card {
  display: flex;
  gap: 15px;
}

⑨ グリッドレイアウト

CSS
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

⑩ ブレンドエフェクトカード

CSS
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #00f;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: .3s;
}

.card:hover::before {
  opacity: 1;
}

レスポンシブ対応の基本

① グリッドの切り替え

CSS
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

② 画像の比率を維持

CSS
.card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

③ 可変余白

CSS
.card {
  padding: clamp(15px, 3vw, 30px);
}

実用サンプル（コピペOK）

レスポンシブカード一覧

HTML
<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="image">
    <h3>タイトル</h3>
    <p>説明文が入ります</p>
  </div>
</div>
CSS
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  transition: transform .3s;
}

.card:hover {
  transform: translateY(-8px);
}
image

タイトル

説明文が入ります

アクセシビリティ配慮

CSS
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

まとめ

  • カードUIはあらゆるサイトで使える汎用パーツ
  • ホバーや影で視認性とUXが向上
  • レスポンシブ設計が重要

ワンポイント

Altie：「カードは“余白・影・動き”のバランスが大事だよ！」

関連記事

PAGE TOP