Bootstrapグリッドシステムでレイアウトしてみよう

Contents

完成イメージ

「サービス紹介」など3つのボックスが横並び（PC時）
スマホでは縦並びに変化
ボックスの中にはタイトルと短い説明

作成ファイル・保存場所

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

ファイル名	内容
bootstrap02.html	Bootstrapのグリッドレイアウト練習用ファイル
※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のグリッドシステム（.row, .col-*）を使って 簡単に複数カラムのレイアウトを作成する
画面サイズに応じて列の幅が変化する レスポンシブ対応 を体験する
セマンティックなタグを活用しながら 構造も意識したレイアウト にする

チェックポイント

.container → .row → .col-* という構造になっているか
画面幅を変えるとカラムの表示が変化するか（レスポンシブ）
col-6 col-md-4 など 複数のブレイクポイントを使っているか

Bootstrapのブレイクポイントとは？

Bootstrapでは、画面の横幅（＝デバイスサイズ）によってレイアウトや見た目を切り替えるために
**ブレイクポイント（画面幅ごとのルール）**という仕組みを用意しています。

よく使うブレイクポイント一覧

クラス例	適用される幅（以上の時）	よく使う画面サイズ
`.col-12`	常に（全画面幅）	スマホ〜PC共通
`.col-sm-*`	576px以上	スマホ横向き〜
`.col-md-*`	768px以上	タブレット以上
`.col-lg-*`	992px以上	ノートPC以上
`.col-xl-*`	1200px以上	デスクトップ

たとえば

<div class="row">
  <div class="col-12 col-md-6">カラムA</div>
  <div class="col-12 col-md-6">カラムB</div>
</div>

とした場合…

スマホ（〜767px）では幅100%（12カラム）で縦並び
タブレット以上（768px〜）では幅6カラム分になり、横に2列並ぶ

また

<div class="row">
  <div class="col-12 col-lg-4">カラムA</div>
  <div class="col-12 col-lg-8">カラムB</div>
</div>

とした場合…

スマホ〜ノートPC未満（〜991px） では両方とも .col-12 が適用され、縦に2つ並ぶ（幅100%）
ノートPC以上（992px〜） では .col-lg-* が適用され、カラムAが幅4（1/3）、カラムBが幅8（2/3）で横に並ぶ

詳しくはBootstrapサイトの「ブレイクポイント」のドキュメントを確認しましょう。
https://getbootstrap.jp/docs/5.3/layout/breakpoints/

ブレイクポイントは「col」以外にも使える！

Bootstrapのブレイクポイント指定は マージンやパディング、文字揃えなどのユーティリティクラスにも対応しています。

クラス例	意味
`.mt-md-3`	768px以上のときだけ上に `1rem` の余白
`.text-lg-end`	992px以上のときに右揃え
`.d-none d-md-block`	スマホでは非表示、768px以上で表示

クラス名に「-md-」や「-lg-」が入っていたら、どのサイズから切り替わるかを意識して読みましょう！

作業ステップ

bootstrap02.html というファイルを新規作成します。
<main> タグの中に .container を作成し、その中に .row を入れます。
.row の中に .col 要素を3つ作り、それぞれに見出しとテキストを入れてください。
クラス例：col-12 col-md-4 など
クラスの違いで「スマホでは1列、PCでは3列になる」などの変化を試してみましょう。

Bootstrapトレーニング

実際に、以下のコードを CDNリンク部分以外は自分で入力してみましょう！手を動かすことで、コードの流れやクラスの使い方がしっかり身につきます。(class=”h5″は文字の大きさを変えるBootstrapのclassです)

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

    <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="p-3 border bg-light">
                    <h2 class="h5">Web制作</h2>
                    <p>HTML/CSSを使って、美しく整ったウェブページを作成します。</p>
                </div>
            </section>

            <section class="col-12 col-md-4 mb-4">
                <div class="p-3 border bg-light">
                    <h2 class="h5">デザイン設計</h2>
                    <p>目的やターゲットに応じたUI/UXデザインをご提案します。</p>
                </div>
            </section>

            <section class="col-12 col-md-4 mb-4">
                <div class="p-3 border bg-light">
                    <h2 class="h5">コーディング支援</h2>
                    <p>効率的なHTML/CSSコーディング手法やレビューのサポートを行います。</p>
                </div>
            </section>
        </div>
    </main>

</body>

</html>

応用ポイント

.col-sm-*, .col-lg-* など 画面サイズごとのクラスも使ってみよう
.border, .p-3, .bg-light などを使ってボックスを装飾してみるのもおすすめ