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

生徒

「Bootstrapでレイアウトを作っていたら、中にさらに行と列を入れる場面が出てきました…これって大丈夫なんですか？」

先生

「よくある場面ですね。ただし、入れ子が深くなると注意点も増えます。」

生徒

「見た目は動くんですが、後から自分でも分からなくなってしまって…」

先生

「それなら、設計の考え方と命名の工夫を一緒に整理していきましょう。」

1. 入れ子グリッドとは何かをやさしく理解しよう

入れ子グリッドとは、列の中にさらに行と列を作るレイアウトのことです。大きな箱の中に小さな仕切りを入れるイメージです。Bootstrapでは、colの中にrowを入れることで、さらに細かい配置ができます。

初心者の方は「中にさらに箱を作っていいの？」と不安になりますが、正しい順番を守れば問題ありません。

2. 基本となる正しい入れ子の構造

入れ子グリッドでも基本は同じです。containerの中にrow、その中にcol、そして必要であればそのcolの中にrowを入れます。この順番が崩れると、レイアウトが壊れやすくなります。


<div class="container">
    <div class="row">
        <div class="col">
            親の列
            <div class="row">
                <div class="col">子の列</div>
                <div class="col">子の列</div>
            </div>
        </div>
    </div>
</div>

ブラウザ表示

3. 階層が深くなりすぎると起きる問題

入れ子が増えると、HTMLの構造が縦に長くなり、どこで閉じているのか分からなくなります。これは、引き出しの中にさらに箱を入れすぎて、何がどこにあるか分からなくなる状態と同じです。

また、余白や横幅の計算も複雑になり、思わぬズレや崩れが発生しやすくなります。

4. 入れ子は三段階までを目安に考える

初心者の方には、入れ子は最大でも三段階までに抑えることをおすすめします。深くしすぎないことで、見た目も管理もしやすくなります。

どうしても複雑になる場合は、レイアウトを分割して考えることが大切です。


<div class="container">
    <div class="row">
        <div class="col">
            レベル1
            <div class="row">
                <div class="col">レベル2</div>
            </div>
        </div>
    </div>
</div>

ブラウザ表示

5. クラス名を工夫して迷子を防ぐ

入れ子構造では、どの列がどの役割なのか分からなくなりがちです。そこで役立つのが、意味のあるクラス名です。見た目ではなく役割で名前を付けると、後から見ても理解しやすくなります。


<div class="container">
    <div class="row main-area">
        <div class="col sidebar-area">サイド</div>
        <div class="col content-area">
            <div class="row content-inner">
                <div class="col">中身</div>
            </div>
        </div>
    </div>
</div>

ブラウザ表示

6. 命名ルールを自分なりに決めておく

クラス名に正解はありませんが、ルールを決めることが大切です。例えば「親はarea、子はinner」と決めるだけでも、構造が分かりやすくなります。

これは、引き出しにラベルを貼るのと同じで、後から見たときにすぐ理解できます。

7. 見た目確認のために一時的に色を付ける

入れ子が深くなったときは、どこまでがどの箱か分かりづらくなります。そんなときは、背景色を一時的に付けて確認すると便利です。


<style>
    .main-area { background-color: #e3f2fd; }
    .content-area { background-color: #bbdefb; }
    .content-inner { background-color: #90caf9; }
</style>

<div class="container">
    <div class="row main-area">
        <div class="col content-area">
            <div class="row content-inner">
                <div class="col">確認用</div>
            </div>
        </div>
    </div>
</div>

ブラウザ表示