English 中文 العربية 日本語 Português

Bootstrap: Card

最終更新：2026-08-26

1. このレッスンの概要

(1) 前提条件

(2) 🎯 学習内容

(3) 問題提起

Bobの商品一覧ページでは、画像、商品名、価格、「カートに追加」ボタンを持つ6つの商品を表示する必要があります。BootstrapのCardコンポーネントとグリッドシステムを使用すれば、わずか10行余りのコードで実現できます。

(4) 解決策

Cardは、Bootstrap 5において最もコアなコンテンツコンテナです。画像、テキスト、ボタン、リストを単一の独立したコンテンツユニットに組み合わせることができます。商品表示、記事プレビュー、ユーザープロフィールカードなど、幅広く使用されています。

考え方のヒント： カードは、魔法のディスプレイボックスのようなものです。内部には画像、テキスト、リスト、ボタンを自由に配置でき、外部には統一された外観（角丸、シャドウ、ボーダー）を保ちます。

(5) メリット

BootstrapのCardコンポーネントとグリッドシステムを組み合わせれば、わずか10行余りのコードで、プロフェッショナルで美しい商品表示ページを構築できます。

2. 基本的なCard構造

▶ サンプル 基本カード

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">

    <div class="card" style="width: 18rem;">
      <img src="https://via.placeholder.com/286x180/0d6efd/fff" class="card-img-top" alt="Placeholder">
      <div class="card-body">
        <h5 class="card-title">Product Name</h5>
        <h6 class="card-subtitle mb-2 text-body-secondary">$29.99</h6>
        <p class="card-text">A great product that solves real problems for everyday users.</p>
        <a href="#" class="btn btn-primary">Add to Cart</a>
      </div>
    </div>

    <hr>

    <div class="card">
      <div class="card-header">Featured</div>
      <div class="card-body">
        <h5 class="card-title">Special Offer</h5>
        <p class="card-text">With supporting text below as a natural lead-in.</p>
        <a href="#" class="btn btn-success">Claim Offer</a>
      </div>
      <div class="card-footer text-body-secondary">2 days remaining</div>
    </div>

    <hr>

    <div class="card" style="width: 18rem;">
      <div class="card-header">Notifications</div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">New message from Alice</li>
        <li class="list-group-item">Server update completed</li>
        <li class="list-group-item">Payment received: $120</li>
      </ul>
    </div>

  </div>
</body>
</html>
▶ 試してみよう

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

3. Card構造の詳細

要素 class 説明
コンテナ card Cardコンポーネントを宣言し、ボーダー、角丸、シャドウを提供します。
画像 card-img-top カードの上部画像（レスポンシブ幅）。
本文 card-body テキストやボタンを配置するためのパディング付きコンテナ。
タイトル card-title カードタイトル（h5フォントサイズ）。
サブタイトル card-subtitle タイトルの下に表示されるセカンダリテキスト。
テキスト card-text 本文段落（margin-bottom付き）。
リンク card-link カード内のリンク（青色テキスト）。
ヘッダー card-header カードの上部バー。
フッター card-footer カードの下部バー。
画像オーバーレイ card-img-overlay 画像の上にオーバーレイ表示されるテキスト。

(1) 画像オーバーレイ

HTML 
<div class="card text-white">
  <img src="https://via.placeholder.com/400x200/198754/fff" class="card-img" alt="Background">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Text is placed on top of the image.</p>
  </div>
</div>
▶ 試してみよう

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

4. カードのカラーと背景

HTML 
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card</h5>
    <p class="card-text">Full background color using text-bg-* class.</p>
  </div>
</div>

<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Danger border</div>
  <div class="card-body">
    <h5 class="card-title">Border only card</h5>
    <p class="card-text">Only the border gets the color.</p>
  </div>
</div>
▶ 試してみよう

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

class 効果
text-bg-primary / text-bg-dark フルカラー背景 + 白色テキスト
bg-light / bg-dark カスタム背景色
border-primary / border-danger ボーダー色のみ

5. 横型カード

HTML 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/200x200/0d6efd/fff" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Horizontal Card</h5>
        <p class="card-text">This card uses row + col to place image and text side by side.</p>
        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>
▶ 試してみよう

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

6. Card Group

HTML 
<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/300x180/0d6efd/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">This card has less content.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x180/198754/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">This card has more content. Cards auto-match height.</p>
      <p class="card-text">Additional paragraph to show height matching.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x180/dc3545/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Short content again.</p>
    </div>
  </div>
</div>
▶ 試してみよう

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

(1) カードグリッド（推奨）

HTML 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x180/0d6efd/fff" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">Content here.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x180/dc3545/fff" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 2</h5>
        <p class="card-text">More content here.</p>
      </div>
    </div>
  </div>
</div>
▶ 試してみよう

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

レイアウト方法 特徴 使用場面
card-group ギャップなし、等高 詳細ページ、機能比較
row-cols-* + h-100 ギャップあり、等高 商品/記事一覧
標準 row + col-* 非等高 情報表示

7. その他のCardの例

▶ サンプル ECサイト商品カード

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-Commerce Product Card</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/0d6efd/fff" class="card-img-top" alt="Product">
          <div class="card-body">
            <h5 class="card-title">Wireless Headphones</h5>
            <p class="card-text text-muted">Noise-cancelling, 30hr battery life.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$79.99</span>
              <span class="badge bg-success rounded-pill">In Stock</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-primary w-100">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/198754/fff" class="card-img-top" alt="Product">
          <div class="card-body">
            <h5 class="card-title">Smart Watch</h5>
            <p class="card-text text-muted">Fitness tracker with heart-rate monitor.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$199.99</span>
              <span class="badge bg-warning rounded-pill">Low Stock</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-primary w-100">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/dc3545/fff" class="card-img-top" alt="Product">
          <div class="card-body">
            <h5 class="card-title">Bluetooth Speaker</h5>
            <p class="card-text text-muted">Portable, waterproof, 12hr playback.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$49.99</span>
              <span class="badge bg-danger rounded-pill">Sold Out</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-secondary w-100" disabled>Out of Stock</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

▶ サンプル ユーザープロフィールカード（画像オーバーレイ）

HTML 
<div class="card text-white border-0" style="width: 20rem;">
  <img src="https://via.placeholder.com/320x200/6f42c1/fff" class="card-img rounded-3" alt="Cover">
  <div class="card-img-overlay d-flex flex-column justify-content-end">
    <h5 class="card-title">Alice Chen</h5>
    <p class="card-text">Senior UI Designer at TechCorp</p>
    <div>
      <span class="badge bg-primary rounded-pill">12 Projects</span>
      <span class="badge bg-success rounded-pill">98% Rating</span>
    </div>
  </div>
</div>
▶ 試してみよう

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

▶ サンプル Card Group料金表

HTML 
<div class="card-group text-center">
  <div class="card border-primary">
    <div class="card-header bg-primary text-white">Basic</div>
    <div class="card-body">
      <h3 class="card-title">$9<span class="text-muted fs-6">/mo</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>10 GB Storage</li>
        <li>1 User</li>
        <li>Email Support</li>
      </ul>
      <button class="btn btn-outline-primary">Choose Plan</button>
    </div>
  </div>
  <div class="card border-success">
    <div class="card-header bg-success text-white">Pro</div>
    <div class="card-body">
      <h3 class="card-title">$29<span class="text-muted fs-6">/mo</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>100 GB Storage</li>
        <li>5 Users</li>
        <li>Priority Support</li>
      </ul>
      <button class="btn btn-success">Choose Plan</button>
    </div>
  </div>
  <div class="card border-warning">
    <div class="card-header bg-warning text-white">Enterprise</div>
    <div class="card-body">
      <h3 class="card-title">$99<span class="text-muted fs-6">/mo</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>Unlimited Storage</li>
        <li>Unlimited Users</li>
        <li>24/7 Support</li>
      </ul>
      <button class="btn btn-warning">Choose Plan</button>
    </div>
  </div>
</div>
▶ 試してみよう

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

▶ サンプル 横型アイコンカード

HTML 
<div class="card mb-3" style="max-width: 500px;">
  <div class="row g-0 align-items-center">
    <div class="col-md-3 text-center p-3">
      <div class="display-6 text-primary">🔒</div>
    </div>
    <div class="col-md-9">
      <div class="card-body">
        <h5 class="card-title">Secure Payment</h5>
        <p class="card-text">All transactions are encrypted with SSL 256-bit security.</p>
      </div>
    </div>
  </div>
</div>
<div class="card mb-3" style="max-width: 500px;">
  <div class="row g-0 align-items-center">
    <div class="col-md-3 text-center p-3">
      <div class="display-6 text-success">🚚</div>
    </div>
    <div class="col-md-9">
      <div class="card-body">
        <h5 class="card-title">Free Shipping</h5>
        <p class="card-text">Free delivery on orders over $50, arrives within 3-5 days.</p>
      </div>
    </div>
  </div>
</div>
▶ 試してみよう

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

(1) Cardコンポーネント構造

100% 
flowchart TD
    A[card container] --> B[card-img-top<br/>Image]
    A --> C[card-body Body]
    A --> D[card-header<br/>Header]
    A --> E[card-footer<br/>Footer]
    C --> F[card-title Title]
    C --> G[card-subtitle Subtitle]
    C --> H[card-text Text]
    C --> I[card-link Link]
    A --> J[card-img-overlay<br/>Image Overlay Text]
    A --> K[list-group List Group]

出力結果： Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

カードの種類 class 効果の説明
フルカラー背景 text-bg-primary/dark 背景とテキストが同時に色を変更
ボーダーのみ border-primary/danger 白背景を維持し、ボーダーのみに色を適用
透明背景 bg-transparent 背景色なし、ダークモードに適している
ボーダーなし border-0 ボーダーを完全に除去
レイアウト方法 ギャップ 等高 適した場面
card-group なし あり 詳細ページ、機能比較
row-cols-* + h-100 あり あり 商品一覧、ブログ
row-cols-*（h-100なし） あり なし 高さの異なるコンテンツ
組み合わせコンテンツ class よくある使用場面
画像 + テキスト + ボタン card-img-top + card-body 商品表示
ヘッダー + 本文 + フッター card-header + card-body + card-footer メッセージ、お知らせ
画像オーバーレイ card-img-overlay カバー、バナー
アイコン + 横型レイアウト row g-0 + col-* 機能一覧、サービス紹介
リストグループ list-group list-group-flush 通知、メニュー

❓ よくある質問

Q カードの幅は固定ですか、それとも適応的ですか？
A カードはデフォルトでwidth: 100%です（親コンテナに合わせて広がります）。style="width: 18rem;"を使用して幅を固定したり、グリッドカラム内に配置して自動的に適応させたりできます。
Q カード内の異なる領域を個別に配置するにはどうすればいいですか？
A カード内でFlexboxユーティリティクラスを使用できます。例えば、.card-body内のボタンを下部に寄せるには、mt-autoを使用してカードの下部に押し下げます。
Q カードはダークモードに対応していますか？
A はい。Bootstrap 5.3のカードはdata-bs-theme="dark"に自動的に応答し、テキストと背景色が自動的に切り替わります。
Q card-groupは小さな画面ではどう表示されますか？
A 小さな画面では、card-group内のカードは縦方向にスタックされ、各カードがコンテナの全幅を取りつつ、等高を維持します。等高が不要な場合は、グリッドのrow-cols-*の使用を推奨します。
Q カード内に完全なリストグループを配置できますか？
A はい。カード内に直接list-group list-group-flushを配置できます。この場合、リストグループはカードのパディングに沿ってフラットに配置され、統一されたビジュアル効果が生まれます。

📖 まとめ

📝 練習問題

  1. ⭐ 商品カードグリッドを作成しましょう：モバイルで1カラム、タブレットで2カラム、デスクトップで3カラム。各カードには画像 + タイトル + 価格 + 説明 + ボタンを含めます。mt-autoを使用してボタンを下部に固定しましょう。
  2. ⭐⭐ ユーザープロフィールカードを作成しましょう：左側にアバター（横型画像）+ 右側に名前 + 自己紹介 + SNSリンク。カードにはborder-primaryの青いボーダーをつけましょう。
  3. ⭐⭐⭐ card-groupを使用して3つの機能紹介カードを作成しましょう。各カードにはアイコンエリア + タイトル + 説明を含めます。3つのカードは自動的に等高になるようにしましょう。

前のレッスン： Buttons and Button Groups · 次のレッスン： List Groups and Badges

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%