Bootstrapカード入門完全ガイド！初心者でもわかる.card/.card-body/.card-header/.card-footerの基本構造

カード入門：.card/.card-body/.card-header/.card-footer の基本構造

先生と生徒の会話形式で理解しよう

生徒

「Webサイトで、四角い枠に情報がまとまっているデザインをよく見かけます。あれはどうやって作るんですか？」

先生

「それはBootstrapのカードという仕組みを使って作られていることが多いですね。」

生徒

「カードって、特別な知識がないと難しそうなイメージがあります…。」

先生

「大丈夫ですよ。カードは箱を積み重ねる感覚で使えるので、初めてでも理解しやすいですよ。」

1. Bootstrapのカードとは何か？

Bootstrapのカードとは、情報を見やすく整理するための箱のような部品です。文章、画像、ボタンなどをひとまとめにできるため、ブログ記事一覧、商品紹介、プロフィール表示など、さまざまな場面で使われます。

現実世界で例えるなら、ノートの一ページを切り取って、重要な内容だけを書いたメモのような存在です。Webページの中で、そのメモがカードとして並びます。

Bootstrapを使うと、難しいデザインの指定をしなくても、整った見た目のカードを簡単に作ることができます。

2. cardクラスがカード全体の土台になる

カードを作るときに最初に使うのがcardというクラスです。これはカード全体を包む外側の箱になります。家で言えば、壁や屋根を含めた建物そのものです。

このcardがあることで、枠線や影、余白などが自動的に整えられます。自分で細かくCSSを書かなくても、Bootstrapが代わりに整えてくれます。


<div class="card" style="width: 18rem;">
    <div class="card-body">
        カードの中身
    </div>
</div>

ブラウザ表示

このように、cardクラスは必ず一番外側に書く、と覚えておくと混乱しません。

3. card-bodyは中身を書くための場所

card-bodyは、カードの中に文章やボタンを書くためのスペースです。段ボール箱の中に実際の荷物を入れるイメージに近いです。

文字を書くだけでなく、リンクやボタン、画像なども入れられます。card-bodyを使うことで、文字の余白が自動で調整され、読みやすくなります。


<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">タイトル</h5>
        <p class="card-text">これはカードの説明文です。</p>
    </div>
</div>

ブラウザ表示

card-bodyの中に何を書いてもよい、という感覚で使うと理解しやすいです。

4. card-headerでカードの見出しを作る

card-headerは、カードの一番上に表示される見出し部分です。本の表紙や、ファイルのタイトルラベルのような役割を持ちます。

ここにタイトルやカテゴリ名を書くことで、「このカードには何が書いてあるのか」が一目でわかるようになります。


<div class="card" style="width: 18rem;">
    <div class="card-header">
        お知らせ
    </div>
    <div class="card-body">
        <p>本日の営業時間は10時からです。</p>
    </div>
</div>

ブラウザ表示

card-headerは必須ではありませんが、情報を整理したいときにとても便利です。

5. card-footerで補足情報をまとめる

card-footerは、カードの一番下に表示されるエリアです。注意書きや日付、ボタンなどを置くことが多いです。

レシートの一番下に書かれている合計金額や注意文のような存在だと考えるとイメージしやすいでしょう。


<div class="card" style="width: 18rem;">
    <div class="card-body">
        <p>新商品が入荷しました。</p>
    </div>
    <div class="card-footer text-muted">
        更新日：2026年1月
    </div>
</div>

ブラウザ表示

card-footerも必要なときだけ使えば問題ありません。

6. カードに画像を組み合わせる基本

カードは文字だけでなく、画像とも相性が良いのが特徴です。画像を入れることで、内容が直感的に伝わりやすくなります。

特に商品紹介やプロフィールカードでは、画像付きカードがよく使われます。


<div class="card" style="width: 18rem;">
    <img src="/img/sample150-100.jpg" class="card-img-top" alt="サンプル画像">
    <div class="card-body">
        <p>画像付きカードの例です。</p>
    </div>
</div>

ブラウザ表示

画像はカードの上に置くのが基本で、見た目も自然になります。