Bootstrap入れ子グリッド完全入門｜ネストの基本とレイアウト崩れを防ぐコツ

入れ子グリッド（ネスト）の基本とレイアウト崩れを防ぐコツ

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

生徒

「Bootstrapのグリッドって便利そうですが、入れ子って何ですか？」

先生

「入れ子は、グリッドの中にさらにグリッドを作る方法です。箱の中に箱を置くイメージですね。」

生徒

「難しそうで、レイアウトが崩れそうで不安です…」

先生

「大丈夫です。基本のルールとコツを守れば、初心者でもきれいに作れますよ。」

1. Bootstrapグリッドシステムと入れ子の考え方

Bootstrapのグリッドシステムは、画面を横に12個の区切りに分けてレイアウトを作る仕組みです。この12分割ルールを使うことで、画面サイズが変わっても整った見た目を保てます。入れ子グリッドとは、すでに分けた列の中で、さらに12分割を行うことです。大きな段ボールの中に、小さな仕切り箱を入れるような感覚で考えると分かりやすいでしょう。

2. 入れ子グリッドの基本ルール

Bootstrapで入れ子を使うときの大原則は、必ず列の中に行を置くことです。いきなり列の中に列を置くと、レイアウトが崩れる原因になります。つまり、rowの中にcolがあり、そのcolの中にもう一度rowを作ってからcolを配置します。この順番を守ることが、グリッドネストの基本です。


<div class="row">
    <div class="col-8">
        <div class="row">
            <div class="col-6">左</div>
            <div class="col-6">右</div>
        </div>
    </div>
    <div class="col-4">サイド</div>
</div>

ブラウザ表示

3. 初心者がやりがちなレイアウト崩れの原因

レイアウトが崩れる原因で多いのは、12分割を超えてしまうことです。例えば、横に6と7を並べると合計が13になり、画面からはみ出します。また、rowを忘れて直接列を入れてしまうケースもよくあります。Bootstrapは親切ですが、ルールを無視すると正しく表示されません。


<div class="row">
    <div class="col-7">左</div>
    <div class="col-6">右</div>
</div>

ブラウザ表示

4. 入れ子グリッドを使った実践レイアウト例

ここでは、メインエリアの中にさらに左右分割を作る例を紹介します。ブログ記事の本文と、その中に並ぶ画像や説明文を想像すると理解しやすいです。外側の列は大きな役割、内側の列は細かい配置を担当します。


<div class="row">
    <div class="col-9">
        <div class="row">
            <div class="col-4">
                <img src="/img/sample120-120.jpg" alt="画像">
            </div>
            <div class="col-8">
                <p>説明文が入ります</p>
            </div>
        </div>
    </div>
    <div class="col-3">メニュー</div>
</div>

ブラウザ表示

5. ブレークポイントと入れ子の関係

Bootstrapには、画面サイズごとに見た目を変える仕組みがあります。これをブレークポイントと呼びます。入れ子グリッドでも同じ考え方が使えます。スマートフォンでは縦並び、パソコンでは横並びにしたい場合でも、内側のグリッドで設定できます。画面サイズに応じて自然に並びが変わるので、無理な調整は不要です。


<div class="row">
    <div class="col-md-8">
        <div class="row">
            <div class="col-12 col-md-6">A</div>
            <div class="col-12 col-md-6">B</div>
        </div>
    </div>
    <div class="col-md-4">C</div>
</div>

ブラウザ表示