Bootstrap画像付きカード完全ガイド｜card-img-topとcard-img-overlayの使い分けを初心者向けに解説

画像付きカード：.card-img-top/.card-img-overlay の使い分け

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

生徒

「Bootstrapのカードに画像を入れたいんですが、card-img-topとcard-img-overlayって何が違うんですか？」

先生

「いいところに気づきましたね。画像を上に置くか、文字を画像の上に重ねるかで使い分けます。」

生徒

「パソコンをほとんど触ったことがなくても使えますか？」

先生

「大丈夫です。写真付きのチラシを作る感覚で考えると、とても分かりやすいですよ。」

1. Bootstrapのカードとは何かをやさしく理解しよう

Bootstrapのカードとは、情報をひとまとめにして表示するための箱のような部品です。タイトル、文章、画像、ボタンなどを一つの枠に整理できます。現実で例えると、商品紹介の紙や名刺入れのような存在です。Bootstrapを使うと、このカードを特別なデザイン知識がなくても、きれいに並べて表示できます。

カードはブログ記事一覧、商品一覧、プロフィール表示など、さまざまな場面で使われます。特に画像付きカードは、見た目で内容を伝えやすいため、初心者でも扱いやすいのが特徴です。

2. card-img-topの基本的な役割と考え方

card-img-topは、カードの一番上に画像を置くための指定です。写真が上、文字が下という配置になります。これは雑誌の記事やネットショップの商品画像と同じ構成なので、とても直感的です。

画像はあくまで見出しの役割で、その下に説明文が続きます。そのため、読みやすさを重視したいときや、文章が多い場合に向いています。


<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>

ブラウザ表示

3. card-img-overlayの基本的な役割と考え方

card-img-overlayは、画像の上に文字を重ねて表示するための指定です。写真の上に文字を書いたポスターや、観光地の紹介バナーをイメージすると分かりやすいです。

文字が画像の上に表示されるため、見た目のインパクトが強くなります。ただし、文字が読みにくくならないよう、色の指定には注意が必要です。


<div class="card text-white" style="width: 18rem;">
    <img src="/img/sample150-100.jpg" class="card-img" alt="サンプル画像">
    <div class="card-img-overlay">
        <h5 class="card-title">重ね文字</h5>
        <p class="card-text">画像の上に文章を表示します。</p>
    </div>
</div>

ブラウザ表示

4. card-img-topとcard-img-overlayの違いを日常で例える

card-img-topは、写真付きの記事のような構成です。まず写真を見て、その下で内容を読む流れになります。一方、card-img-overlayは、写真そのものに説明を書き込むイメージです。

説明をじっくり読ませたいならcard-img-top、雰囲気や印象を強く伝えたいならcard-img-overlayと考えると失敗しにくくなります。

5. 文字が読みやすくなる工夫と基本設定

画像の上に文字を重ねる場合、背景と文字の色が似ていると読みにくくなります。Bootstrapでは、文字色を白にしたり、背景を少し暗くすることで対応できます。


<style>
    .overlay-bg {
        background-color: rgba(0,0,0,0.5);
    }
</style>

<div class="card text-white" style="width: 18rem;">
    <img src="/img/sample150-100.jpg" class="card-img" alt="画像">
    <div class="card-img-overlay overlay-bg">
        <p>文字が読みやすくなります</p>
    </div>
</div>

ブラウザ表示