CSSカードデザイン集｜レスポンシブ対応のコピペサンプル – devsakaso

カードUIは、記事一覧、商品一覧、プロフィール、サービス紹介、料金表などでよく使うデザインです。

この記事では、CSSで作れるカードデザインを20種類紹介します。

カード単体のHTMLとCSSを中心にまとめているので、複数列で並べる方法は CSSレスポンシブカード一覧へ分けます。

カードを作るときの基本

カードは、余白、枠線、角丸、背景、影を整えるだけでも見やすくなります。

.card {
  padding: 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

最初はこの形をベースにして、画像、ボタン、ラベル、影などを追加していくと作りやすいです。

1. 基本のシンプルカード

文章だけを入れる、もっとも基本的なカードです。

<article class="card-basic">
  <h2>カードタイトル</h2>
  <p>カードの説明文が入ります。短い紹介文に向いています。</p>
</article>

.card-basic {
  padding: 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.card-basic h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

.card-basic p {
  margin: 0;
  line-height: 1.8;
}

2. 影付きカード

少し浮いた印象にしたいときのカードです。

<article class="card-shadow">
  <h2>影付きカード</h2>
  <p>白背景のセクションで使いやすいカードです。</p>
</article>

.card-shadow {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

影を強くしすぎると重く見えるので、薄めにします。

3. 左線付きカード

注意書きやポイント紹介に使いやすいカードです。

<div class="card-border-left">
  <strong>ポイント</strong>
  <p>重要な内容を短くまとめます。</p>
</div>

.card-border-left {
  padding: 20px;
  background: #f9fafb;
  border-left: 5px solid #2563eb;
  border-radius: 6px;
}

.card-border-left p {
  margin-bottom: 0;
}

4. 背景色付きカード

薄い背景色で、補足や案内を見せるカードです。

.card-soft {
  padding: 24px;
  color: #1e3a8a;
  background: #eff6ff;
  border-radius: 8px;
}

本文カードに使う場合は、背景色を薄めにすると読みやすくなります。

5. 画像付きカード

記事一覧や商品紹介で使いやすいカードです。

<article class="card-image">
  <img src="sample.jpg" alt="サンプル画像">
  <div class="card-image__body">
    <h2>画像付きカード</h2>
    <p>画像と本文をまとめたカードです。</p>
  </div>
</article>

.card-image {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-image__body {
  padding: 20px;
}

aspect-ratio と object-fit を使うと、画像サイズが違っても見た目を揃えやすいです。

6. ラベル付き記事カード

カテゴリや更新日を表示したい記事カードです。

<article class="card-post">
  <span class="card-post__label">CSS</span>
  <h2>記事タイトルが入ります</h2>
  <p>記事の抜粋文が入ります。</p>
</article>

.card-post {
  padding: 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.card-post__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 700;
  background: #eff6ff;
  border-radius: 9999px;
}

ラベル単体のデザインは、CSSバッジ・ラベル・タグデザイン集で扱います。

7. カード全体がリンクになるカード

カード全体をクリックできるようにしたい場合の例です。

<a href="#" class="card-link">
  <span>CSS</span>
  <strong>リンクカードのタイトル</strong>
  <em>詳しく見る →</em>
</a>

.card-link {
  display: grid;
  gap: 12px;
  padding: 24px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.card-link em {
  color: #2563eb;
  font-style: normal;
  font-weight: 700;
}

カード内に別のリンクやボタンを入れると操作が複雑になるため、カード全体リンクではクリック箇所を増やしすぎないようにします。

8. 横長メディアカード

PCでは画像とテキストを横並びにしたい場合のカードです。

<article class="card-media">
  <img src="sample.jpg" alt="サンプル画像">
  <div>
    <h2>横長カード</h2>
    <p>PCでは画像と文章が横並びになります。</p>
  </div>
</article>

.card-media {
  display: grid;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.card-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

@media (min-width: 768px) {
  .card-media {
    grid-template-columns: 220px 1fr;
    align-items: center;
  }
}

9. プロフィールカード

著者紹介やメンバー紹介に使えるカードです。

<article class="card-profile">
  <img src="avatar.jpg" alt="山田太郎のプロフィール画像">
  <h2>山田太郎</h2>
  <p>Web制作を学習しています。HTMLとCSSが好きです。</p>
</article>

.card-profile {
  max-width: 320px;
  padding: 28px;
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.card-profile img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
}

10. 料金プランカード

サービスの料金やプラン紹介に使えるカードです。

<article class="card-price">
  <h2>ベーシック</h2>
  <p class="card-price__amount">¥1,000<span>/月</span></p>
  <ul>
    <li>基本機能</li>
    <li>メールサポート</li>
  </ul>
  <a href="#">申し込む</a>
</article>

.card-price {
  display: grid;
  gap: 16px;
  padding: 28px;
  background: #fff;
  border: 2px solid #2563eb;
  border-radius: 12px;
}

.card-price__amount {
  margin: 0;
  color: #2563eb;
  font-size: 32px;
  font-weight: 700;
}

.card-price__amount span {
  font-size: 14px;
}

11. レビューカード

口コミやお客様の声に使いやすいカードです。

<figure class="card-review">
  <blockquote>説明がわかりやすく、すぐに実装できました。</blockquote>
  <figcaption>山田さん</figcaption>
</figure>

.card-review {
  padding: 24px;
  background: #f9fafb;
  border-radius: 8px;
}

.card-review blockquote {
  margin: 0 0 16px;
  line-height: 1.8;
}

.card-review figcaption {
  color: #6b7280;
  font-size: 14px;
}

引用には blockquote と figcaption を使うと意味が伝わりやすいです。

12. アイコン付きサービスカード

サービス一覧や特徴紹介に使えるカードです。

<article class="card-service">
  <div class="card-service__icon" aria-hidden="true">✓</div>
  <h2>サービス名</h2>
  <p>サービスの特徴を短く説明します。</p>
</article>

.card-service {
  padding: 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.card-service__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: #fff;
  background: #16a34a;
  border-radius: 50%;
}

13. 数字付きステップカード

手順説明に使えるカードです。

<article class="card-step">
  <span>01</span>
  <h2>お問い合わせ</h2>
  <p>フォームからご相談内容をお送りください。</p>
</article>

.card-step {
  position: relative;
  padding: 28px 24px 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.card-step span {
  display: inline-block;
  margin-bottom: 12px;
  color: #2563eb;
  font-size: 28px;
  font-weight: 700;
}

14. 注意書きカード

注意、補足、警告などに使えるカードです。

<aside class="card-note">
  <strong>注意</strong>
  <p>この操作は元に戻せない場合があります。</p>
</aside>

.card-note {
  padding: 20px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
}

.card-note p {
  margin-bottom: 0;
}

補足や注意には aside を使うと意味が合う場合があります。

15. 商品カード

商品画像、価格、ボタンをまとめるカードです。

<article class="card-product">
  <img src="product.jpg" alt="商品の写真">
  <h2>商品名</h2>
  <p class="card-product__price">¥3,980</p>
  <a href="#">詳しく見る</a>
</article>

.card-product {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.card-product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
}

.card-product__price {
  color: #dc2626;
  font-weight: 700;
}

16. 横スクロール用ミニカード

スマホの横スクロール一覧に使いやすい小さめカードです。

<article class="card-mini">
  <img src="sample.jpg" alt="サンプル画像">
  <h2>ミニカード</h2>
</article>

.card-mini {
  width: 220px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  flex: 0 0 auto;
}

.card-mini img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card-mini h2 {
  margin: 0;
  padding: 12px;
  font-size: 16px;
}

横スクロールの親要素は display: flex; と overflow-x: auto; で作ります。

17. ホバーで浮くカード

リンクカードや一覧カードに動きを足したい場合です。

.card-hover {
  padding: 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

hoverの見本は、CSSホバーエフェクト集にまとめます。

18. ボタン位置が揃うカード

カードの本文量が違っても、ボタンを下に揃えたい場合です。

<article class="card-action">
  <h2>カードタイトル</h2>
  <p>本文量が違ってもボタン位置を揃えます。</p>
  <a href="#">詳しく見る</a>
</article>

.card-action {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.card-action a {
  align-self: flex-start;
  margin-top: auto;
}

margin-top: auto; でボタンを下へ押し下げます。

19. グラデーション背景カード

キャンペーンや注目エリアに使えるカードです。

.card-gradient {
  padding: 28px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-radius: 12px;
}

.card-gradient p {
  color: rgba(255, 255, 255, 0.86);
}

文字が読みづらくならないよう、背景色と文字色のコントラストを確認します。

20. CSS変数で色を変えやすいカード

同じ形のカードを色違いで使いたい場合に便利です。

<article class="card-variable">
  <h2>通常カード</h2>
  <p>色を変数で管理します。</p>
</article>

<article class="card-variable card-variable--green">
  <h2>緑カード</h2>
  <p>同じ形で色だけ変えます。</p>
</article>

.card-variable {
  --card-border: #bfdbfe;
  --card-bg: #eff6ff;
  --card-color: #1e3a8a;

  padding: 24px;
  color: var(--card-color);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
}

.card-variable--green {
  --card-border: #bbf7d0;
  --card-bg: #f0fdf4;
  --card-color: #166534;
}

CSS変数を使うと、同じ部品の色違いを管理しやすくなります。

カードで変更しやすいCSS

コピペ後によく調整する場所です。

変えたいもの	変更するCSS
内側の余白	`padding`
角丸	`border-radius`
枠線	`border`
影	`box-shadow`
画像比率	`aspect-ratio`
画像の切り抜き	`object-fit`

カードデザインでよくある失敗

画像サイズがバラバラでカードの高さが揃わない
カード内の余白が狭く、窮屈に見える
影を強くしすぎて重い印象になる
カード全体リンクの中に別リンクを入れてしまう
スマホでも横長カードのままになっている
文字量の違いでボタン位置がバラバラになる

カードを複数並べる場合は、CSSレスポンシブカード一覧でGridやflexの並べ方を確認してください。

まとめ

カードデザインは、背景、枠線、影、画像、ラベル、ボタン位置を組み合わせて作ります。

カード単体の見た目はこの記事、カード一覧のレイアウトは CSSレスポンシブカード一覧、hoverの動きは CSSホバーエフェクト集に分けて管理します。