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

生徒

「Bootstrapで、画面を左右に分けて文字や画像を並べたいのですが、どうすればいいですか？」

先生

「それには『グリッドシステム』という仕組みを使います。画面を縦の列で区切って、パズルのように配置していく方法ですよ。」

生徒

「パズルですか！難しそうに見えますが、初心者でもできますか？」

先生

「大丈夫です！『row（行）』と『col（列）』、そして『12分割』という数字のルールさえ覚えれば、自由自在にレイアウトが作れるようになります。」

1. グリッドシステムとは？画面を整理する魔法の線

Bootstrap（ブートストラップ）のグリッドシステムとは、ウェブサイトの画面を透明な「格子（グリッド）」で区切り、その線に沿って文字や画像をきれいに整列させる仕組みのことです。

プログラミング未経験の方に例えると、学校の「時間割表」や「原稿用紙」をイメージしてください。升目があるからこそ、文字を真っ直ぐ、バランスよく書くことができますよね。ウェブデザインも同じで、真っ白なキャンバスに闇雲に配置するのではなく、このグリッドというガイドラインに沿って配置することで、プロのような美しいレイアウトが完成します。

さらに、このシステムを使えば「パソコンでは3列、スマホでは1列」といった、画面サイズに合わせた自動調整（レスポンシブデザイン）も簡単に行えるようになります。

2. rowとcolの基本！「行」と「列」の親子関係

グリッドシステムを理解するための第一歩は、row（ロウ）とcol（コル）という2つの言葉を覚えることです。これは必ず「セット」で使います。

row（行）： 横方向の「一行」を意味します。データの入れ物（コンテナ）のような役割です。
col（列）： rowの中に入る「縦のブロック」です。この中に実際の文字や画像を入れます。

ルールとして、colは必ずrowのすぐ内側に入れなければなりません。例えるなら、rowは「お弁当箱の外枠」、colは「中のおかずを分ける仕切り」です。仕切りだけではお弁当は成立しませんし、外枠がないと中身がバラバラになってしまいますよね。この親子関係がレイアウトの基本となります。

3. 12分割の考え方！数字で幅を決めよう

Bootstrapの最もユニークなルールが、「画面の横幅を12等分して考える」というものです。なぜ12なのでしょうか？それは、12という数字が「2でも3でも4でも6でも割り切れる」という非常に便利な数字だからです。

この「12」という持ち分を、それぞれのcolにどう分け与えるかで幅が決まります。

半分ずつ（2列）： 6 ＋ 6 ＝ 12
3等分（3列）： 4 ＋ 4 ＋ 4 ＝ 12
4等分（4列）： 3 ＋ 3 ＋ 3 ＋ 3 ＝ 12

このように、合計が12になるように数字を指定するだけで、複雑な計算をせずに画面の幅を分割できるのです。もし合計が12を超えてしまうと、入りきらなかったブロックは自動的に下の行へ回り込みます。

4. 実際に書いてみよう！2等分と3等分のレイアウト

それでは、具体的にHTMLコードでどのように書くか見てみましょう。col-6と書けば「12個あるうちの6個分（つまり半分）」の幅になります。背景に色をつけて分かりやすくしたサンプルを用意しました。


<div class="container text-center">
    <div class="row mb-3">
        <div class="col-6 bg-primary text-white p-3">幅6（半分）</div>
        <div class="col-6 bg-secondary text-white p-3">幅6（半分）</div>
    </div>

    <div class="row">
        <div class="col-4 bg-success text-white p-3">幅4（1/3）</div>
        <div class="col-4 bg-info text-white p-3">幅4（1/3）</div>
        <div class="col-4 bg-warning text-dark p-3">幅4（1/3）</div>
    </div>
</div>

ブラウザ表示

5. 左右非対称なレイアウトも自由自在

12分割のルールを使えば、必ずしも同じ幅に分ける必要はありません。例えば、「左側に細いメニュー、右側に広いメインコンテンツ」というよくあるレイアウトも、数字を変えるだけで一瞬で作れます。

「左は3、右は9」というふうに合計を12に調整すれば、バランスの良い非対称なデザインになります。パソコン操作に慣れていない方でも、足し算さえできればレイアウトが組めるのがBootstrapの凄いところです。


<div class="container">
    <div class="row">
        <div class="col-3 bg-light border p-3">メニュー（幅3）</div>
        <div class="col-9 bg-white border p-3">メイン記事（幅9）</div>
    </div>
</div>

ブラウザ表示

6. 数字を書かない「自動幅」の設定

「いちいち計算するのが面倒！」という時に便利なのが、数字を省略して単に col とだけ書く方法です。これを「オートレイアウト」と呼びます。

row の中に col を3つ入れると、Bootstrapが自動的に「あ、3等分したいんだな」と判断して、幅を均等に割り振ってくれます。2つなら半分ずつ、5つなら5等分です。きっちり計算したくないけれど、とりあえず綺麗に並べたいという時に非常に役立つ時短テクニックです。


<div class="container">
    <div class="row">
        <div class="col bg-danger text-white p-3 border">自動</div>
        <div class="col bg-danger text-white p-3 border">自動</div>
        <div class="col bg-danger text-white p-3 border">自動</div>
        <div class="col bg-danger text-white p-3 border">自動</div>
    </div>
</div>

ブラウザ表示

7. ガター（溝）とは？ブロック間の隙間を理解する

グリッドシステムで配置したブロック同士をよく見ると、少しだけ隙間が空いていることに気づくはずです。この隙間のことをガター（Gutter）と呼びます。日本語では「溝」という意味ですね。

もしこの隙間がないと、文字と文字がくっついてしまい、非常に読みづらくなってしまいます。Bootstrapは最初からこのガターを設定してくれているので、何も意識しなくても読みやすいレイアウトになります。もし隙間をなくしたい、あるいはもっと広げたいという場合は、専用の命令（g-0やg-5など）がありますが、まずは「最初から良い感じの隙間があるんだな」と理解しておくだけで大丈夫です。

8. 複数のrowを使って縦に並べる

1行目が終わったら、2行目、3行目と積み重ねていくことで、ウェブサイト全体の形が出来上がります。一つの container の中に複数の row を入れることで、段落のようにセクションを分けていくことができます。

「上の段は画像が3つ並んでいて、下の段は大きな文章がある」といった構成も、この row と col の組み合わせを積み木のように重ねていくだけで作れます。まずは頭の中で「ここは横に何個並んでいるかな？」と考え、それを row と col-数字 で表現する練習をしてみましょう。


<div class="container">
    <div class="row mb-2">
        <div class="col-12 bg-dark text-white p-2">ヘッダーエリア</div>
    </div>
    <div class="row">
        <div class="col-4 bg-light border p-4">
            <img src="/img/sample120-120.jpg" class="img-fluid" alt="見本">
        </div>
        <div class="col-8 bg-light border p-4">説明文がここに入ります。</div>
    </div>
</div>

ブラウザ表示