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

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

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

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

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

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

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

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

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

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

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

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

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

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でカードの見出しを作る

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で補足情報をまとめる

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. カードに画像を組み合わせる基本

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>

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

7. card構造を覚えるコツ

7. card構造を覚えるコツ

カードの構造は、外側がcard、その中にheaderやbody、footerが入る、という形です。難しく考えず、箱の中に箱を入れるイメージで理解すると混乱しません。

最初はcardとcard-bodyだけを使い、慣れてきたらcard-headerやcard-footerを追加すると、自然に使いこなせるようになります。

Bootstrapのカードは、初心者でも見た目の整ったページを作れる心強い味方です。

まとめ

まとめ

本記事ではBootstrapカードの基本構造であるcard、card body、card header、card footerの使い方について詳しく解説しました。BootstrapカードはWebデザインにおいて非常に重要なUIコンポーネントであり、初心者でも簡単に見やすく整理されたレイアウトを実現できる点が大きな魅力です。特にブログ一覧ページや商品紹介ページ、プロフィール表示など、情報を整理して表示したい場面では欠かせない存在となります。

Bootstrapカードの最大の特徴は、シンプルなHTML構造でありながら、整ったデザインを自動的に適用してくれる点です。cardクラスを使うことで外枠が形成され、card bodyで内容を配置し、card headerやcard footerを追加することで情報を整理することができます。これにより、HTMLとCSSに慣れていない方でも、短時間で見栄えの良いページを作成することが可能になります。

Bootstrapカードの基本構造を整理しよう

Bootstrapカードは箱の中にさらに箱を入れるような構造になっています。まず外側にcardクラスを配置し、その中にcard header、card body、card footerを必要に応じて組み合わせていきます。この構造を理解することで、どのようなデザインでも柔軟に対応できるようになります。

<div class="card" style="width: 18rem;">
    <div class="card-header">
        タイトル
    </div>
    <div class="card-body">
        <p>本文の内容</p>
    </div>
    <div class="card-footer">
        補足情報
    </div>
</div>

このように構造を分けることで、視認性が高く、ユーザーにとって理解しやすいレイアウトを作ることができます。

カードデザインとユーザー体験の向上

Bootstrapカードは単なる見た目の装飾ではなく、ユーザー体験を向上させるための重要な要素です。情報が整理されていることで、ユーザーは必要な情報を素早く見つけることができます。特にスマートフォンやタブレットなどのモバイル環境では、カード形式のレイアウトは非常に相性が良く、スクロールしながら情報を直感的に理解できるというメリットがあります。

また、カードを横並びに配置することで一覧表示がしやすくなり、商品一覧や記事一覧などのページ構成において非常に効果的です。Bootstrapのグリッドシステムと組み合わせることで、レスポンシブ対応も簡単に実現できます。

画像と組み合わせたカードの活用

Bootstrapカードは画像と組み合わせることでさらに魅力的なデザインになります。画像を上部に配置することで視覚的なインパクトを与え、ユーザーの興味を引くことができます。特にECサイトやポートフォリオサイトでは、このような画像付きカードが頻繁に使用されています。

<div class="card" style="width: 18rem;">
    <img src="/img/sample150-100.jpg" class="card-img-top" alt="サンプル画像">
    <div class="card-body">
        <h5 class="card-title">商品タイトル</h5>
        <p class="card-text">商品の説明文です。</p>
    </div>
</div>

このようなカードデザインは、ユーザーのクリック率向上にもつながる重要なテクニックです。

初心者が意識すべきポイント

Bootstrapカードを使う際に初心者が意識すべきポイントは、構造を崩さないことです。cardの中にcard bodyを入れるという基本を守ることで、レイアウトの崩れを防ぐことができます。また、不要な要素は無理に使わず、必要な部分だけを組み合わせることでシンプルで見やすいデザインを維持できます。

最初はcardとcard bodyだけを使い、慣れてきたらcard headerやcard footerを追加していくと自然に理解が深まります。Bootstrapはシンプルな構造でありながら拡張性が高いため、少しずつ機能を追加していくのが上達の近道です。

Bootstrapカードを活用した実践的な例

実務では、カードを使って一覧表示やダッシュボード画面を作ることが多くあります。例えばブログ記事一覧、ニュース一覧、商品一覧など、あらゆる情報をカード形式で整理することで、ユーザーにとって使いやすいインターフェースを提供できます。

また、ボタンを組み合わせることで、詳細ページへのリンクや購入ページへの誘導も簡単に実装できます。これにより、ユーザーの行動をスムーズに導くことが可能になります。

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">記事タイトル</h5>
        <p class="card-text">記事の概要説明です。</p>
        <a href="#" class="btn btn-primary">続きを読む</a>
    </div>
</div>

このようにカードとボタンを組み合わせることで、実践的なWebページを構築することができます。

Bootstrapカードは初心者から実務レベルまで幅広く活用できる重要な技術です。基本構造をしっかり理解し、実際に手を動かして使っていくことで、自然と応用力も身についていきます。これからWeb制作やフロントエンド開発を学ぶ方にとって、必ず役立つスキルとなるでしょう。