Bootstrapのボタン・カード・画像を使って装飾しよう

Contents

完成イメージ（PC と SP)

3つのカードが横並び（PC表示）
各カードには画像・見出し・説明文・「続きを読む」ボタン
スマホでは1列ずつ表示される

作成ファイル・保存場所

bootstrap フォルダに以下のファイルを作成してください。

ファイル名	内容
bootstrap03.html	Bootstrapのボタン・カード・画像装飾の練習ファイル
※CSSファイル不要	BootstrapはCDNで読み込みます

htmlは下記をコピーして使います。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Bootstrap カード練習</title>
    <!-- Bootstrap CDN -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>


</body>

</html>

目的

Bootstrapのコンポーネント（.btn, .card, .img-fluid など）を活用して、簡単に整ったデザインを実現する
「クラスを付けるだけで装飾が変わる」感覚をつかむ
カードの中に画像・見出し・本文・ボタンを組み合わせる構造を理解する

チェックポイント

.card, .card-body, .card-title などの構造が正しく使えているか
.img-fluid によって画像が 親要素に合わせて縮小表示されるようになっているか
.btn を使って、ボタンが明確にスタイルされているか
ボタンに .btn-primary, .btn-outline-* など バリエーションを試しているか

Bootstrapの `.card` とは？

Bootstrapでは、画像・見出し・本文・ボタンなどを1つのまとまりで表示する「カードレイアウト」がよく使われます。ニュース記事一覧や商品一覧、ブログ記事のサマリーなどで活用されます。

カード自体にブレイクポイントはありません

Bootstrapの .card クラスは「見た目の装飾（枠線・影・余白など）」を担当するクラスで、
画面サイズに応じて横幅や並び方を変えるブレイクポイント機能（col-md-4 など）は含まれていません。

そのため、カードをレスポンシブに表示したい場合は、必ず外側に .col-* クラスを使う必要があります。

<div class="col-12 col-md-4">
  <div class="card">
    ...
  </div>
</div>

.col-12 col-md-4 によって、スマホでは1列、PCでは3列にレイアウト
.card はその中の見た目の整え（背景・ボーダー・影など）を行う

つまり、レイアウトの制御は .col-* で、見た目の装飾は .card が担当という分担です。

基本構造

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">タイトル</h5>
    <p class="card-text">本文テキストです。</p>
    <a href="#" class="btn btn-primary">続きを読む</a>
  </div>
</div>

よく使うクラス一覧

クラス名	役割
`.card`	カード全体の枠・背景
`.card-img-top`	カードの上部に表示される画像
`.card-body`	本文部分（見出し・本文・ボタンを入れる）
`.card-title`	見出し（小見出しとして使う）
`.card-text`	説明文
`.btn` + `.btn-*`	ボタン

カードは .col の中に入れることで、グリッドレイアウトの中に表示できるようになります。

作業ステップ

bootstrap03.html というファイルを新規作成します。
.container の中に .row → .col → .card の構造を作成してください。
.card の中には以下の要素を入れましょう：
- .card-img-top：画像
- .card-body の中に
  - .card-title：タイトル
  - .card-text：本文
  - .btn btn-primary：ボタン（例：「続きを読む」）
.col-12 col-md-4 を使って3つのカードを横並びにし、スマホでは縦並びにしてください。

Bootstrapトレーニング

実際に、以下のコードを CDNリンク部分以外は自分で入力してみましょう！手を動かすことで、コードの流れやクラスの使い方がしっかり身につきます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Bootstrap カード練習</title>
    <!-- Bootstrap CDN -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <main class="container my-5">
        <h1 class="text-center mb-4">おすすめ記事</h1>

        <div class="row">
            <section class="col-12 col-md-4 mb-4">
                <div class="card">
                    <img src="https://dummy.kobeya.com/?width=600&height=400&text=HTML" class="card-img-top" alt="HTML画像">
                    <div class="card-body">
                        <h2 class="h5 card-title">HTMLの基本</h2>
                        <p class="card-text">HTMLはWebページの骨組みを作る言語です。</p>
                        <a href="#" class="btn btn-primary">続きを読む</a>
                    </div>
                </div>
            </section>

            <section class="col-12 col-md-4 mb-4">
                <div class="card">
                    <img src="https://dummy.kobeya.com/?width=600&height=400&text=CSS" class="card-img-top" alt="CSS画像">
                    <div class="card-body">
                        <h2 class="h5 card-title">CSSでデザイン</h2>
                        <p class="card-text">CSSは見た目を整えるスタイルシートです。</p>
                        <a href="#" class="btn btn-outline-success">続きを読む</a>
                    </div>
                </div>
            </section>

            <section class="col-12 col-md-4 mb-4">
                <div class="card">
                    <img src="https://dummy.kobeya.com/?width=600&height=400&text=JavaScript" class="card-img-top" alt="JavaScript画像">
                    <div class="card-body">
                        <h2 class="h5 card-title">JavaScriptの動き</h2>
                        <p class="card-text">動きのあるWebにはJavaScriptが使われます。</p>
                        <a href="#" class="btn btn-danger">続きを読む</a>
                    </div>
                </div>
            </section>
        </div>
    </main>

</body>

</html>

補足

Bootstrapでは、見出しタグ（<h1>〜<h6>）に対応する
「見た目だけ」を調整するためのユーティリティクラスが用意されています。

<h2 class="h5">HTMLの基本</h2>

HTMLの構造上はh2だけど、見た目はh5と同じ小さめのフォントサイズ

Bootstrap公式Typography utilities（タイポグラフィユーティリティ）
https://getbootstrap.jp/docs/5.3/content/typography

応用ポイント

.btn-outline-success, .btn-danger, .card-footer などを試してみよう
.text-center, .shadow, .rounded などの装飾クラスも活用してみると、より綺麗な見た目に！