Bootstrapを読み込んで使ってみよう

Contents

完成イメージ

背景（グレー）が画面全体に広がっている
黄色いエリア（.container）の中に見出しと説明文が中央揃えで表示されている
青いボタンが最後に配置されている

作成ファイル・保存場所

bootstrap フォルダを作成します。

ファイル名	内容
bootstrap01.html	Bootstrapの基本クラスを使ったHTMLファイル
※CSSファイル不要	BootstrapはCDNで読み込みます

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>はじめてのBootstrap</title>
    <!-- Bootstrap CDN（公式サイトからコピー） -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

</body>
</html>

目的

Bootstrapというフレームワークを使って、CSSを書かずにデザインができる体験をしましょう！

Bootstrap 公式

BootstrapのCDNリンクを読み込むだけで、すぐにスタイリッシュなレイアウトが作れる感覚を身につけます。
.container, .text-center, .btn など、よく使う基本クラスを体験して、レイアウトの整え方を学びます。
.containerと.container-fluidの違いも、背景色を使って直感的に理解しましょう。

チェックポイント

<head> 内に正しく Bootstrap のCDNリンクが記述されているか
.container によってレイアウトが中央に整っているか
.text-center でテキストが中央揃えになっているか
.btn を使ってボタンがBootstrap風に表示されているか

CDNとは？「Content Delivery Network（コンテンツ配信ネットワーク）」の略で、
インターネット上のサーバーからファイル（ここではBootstrapのCSS）を素早く読み込める仕組みです。
自分でファイルを用意しなくても、公式のリンクを貼るだけですぐに使えます。

`.container` と `.container-fluid` の違い

Bootstrapでは、ページ全体の表示幅を調整するために2種類のレイアウトクラスがあります。

クラス名	役割
`.container`	中央に固定幅で表示（左右に余白あり）
`.container-fluid`	画面の横幅いっぱいに広がる表示

背景色と余白をBootstrapで書くならば

<div class="container-fluid bg-light py-5">
  <div class="container text-center bg-warning mt-5 mb-5 py-5">
    <h1>はじめてのBootstrap</h1>
    <p>CSSを書かなくても、クラスを指定するだけでレイアウトが整います。</p>
    <a href="#" class="btn btn-primary">詳しく見る</a>
  </div>
</div>

.bg-light：全体の背景（外側）に薄いグレー
.bg-warning：中のコンテンツエリアに黄色
.py-5, .mt-5, .mb-5：セクションに余白を付けて見やすく整える

このように、「外は画面いっぱいに広がり、中は中央揃え」という構成はとてもよく使われます！

Bootstrapのスペーサークラスとは？

Bootstrapでは、余白（マージンやパディング）を簡単に調整できるクラスが用意されています。

クラス例	内容
`.mt-3`	上にマージン（margin-top: 1rem）
`.mb-5`	下にマージン（margin-bottom: 約3rem）
`.py-5`	上下にパディング（padding-top/bottom: 約3rem）

接頭語の意味

m = margin（外側の余白）
p = padding（内側の余白）
t = top / b = bottom / x = 左右 / y = 上下

たとえば .mt-5 mb-4 のように組み合わせて、上下の余白を個別に調整できます。

詳しくはBootstrapサイトの余白のドキュメントを確認しましょう。
https://getbootstrap.jp/docs/5.3/utilities/spacing/

作業ステップ

bootstrap01.html というファイルを新規作成します。
<head> 内に Bootstrap のCDNリンクを記述してください。
<body> の中に以下のような構造で要素を配置してください：
- .container-fluid.bg-light：背景全体（外側）
- 中に .container.text-center.bg-warning：中央寄せされた内容部分
- .py-5, .mt-5, .mb-5 で見た目を整える

Bootstrapトレーニング

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>はじめてのBootstrap</title>
    <!-- Bootstrap CDN（公式サイトからコピー） -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container-fluid bg-light py-5">
        <div class="container text-center bg-warning mt-5 mb-5 py-5">
            <h1>はじめてのBootstrap</h1>
            <p>CSSを書かなくても、クラスを指定するだけでレイアウトが整います。</p>
            <a href="#" class="btn btn-primary">詳しく見る</a>
        </div>
    </div>
</body>
</html>

応用ポイント

.btn-outline-*, .btn-danger などのボタンバリエーションを試してみよう
.container-fluid を使った背景演出は今後のセクション装飾にも応用できます