Bootstrapグリッドシステム入門！rowとcolの12分割を徹底解説

グリッド入門：rowとcolの仕組み・12分割の考え方を図解で理解

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

生徒

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

ブラウザ表示

9. グリッドシステムを使いこなすためのヒント

最後に、初心者が迷いやすいポイントをまとめます。colの中にさらに row を入れる「入れ子」というテクニックもありますが、最初は混乱しやすいので避けましょう。まずはシンプルな「1つのrowに合計12になるようにcolを並べる」という形を完璧にマスターすることが大切です。

また、数字を指定しない col と数字を指定する col-4 などを混ぜて使うこともできますが、慣れないうちはどちらかに統一したほうが、思い通りの幅になりやすいです。パズルを解くように楽しみながら、色々な数字の組み合わせを試してみてくださいね！

※この記事では、基本的なレイアウトの仕組みに集中するため、画面サイズごとに幅を変える「ブレークポイント」の詳細については次回の記事で詳しく解説します。

まとめ

Bootstrapグリッドシステムは、ウェブデザインにおけるレイアウト構築の基礎であり、rowとcolというシンプルな構造を理解することで、誰でも効率よく整った画面設計ができるようになります。特に画面を十二分割で考えるというルールは、複雑な計算を必要とせず、直感的にレイアウトを構築できる点が大きな魅力です。colに指定する数字の合計が十二になるように配置するだけで、均等配置や非対称配置など、多彩なデザインが実現できます。

また、rowとcolの親子関係を正しく理解することが、崩れないレイアウトを作るための重要なポイントです。rowは横のまとまりを作り、その中にcolを並べることで、コンテンツの整理が行われます。この構造を守ることで、どのブラウザでも安定した表示が可能になります。さらに、colに数字を指定しない自動幅の機能を使えば、均等に並べたいときの作業効率も大幅に向上します。

Bootstrapのグリッドシステムはレスポンシブデザインにも対応しているため、パソコンやスマートフォンなど、異なる画面サイズでも見やすいレイアウトを維持できます。これは現代のウェブ制作において非常に重要な要素であり、ユーザー体験の向上にもつながります。ガターと呼ばれる余白の存在も、読みやすさや視認性を高めるための重要な役割を担っています。

初心者の方は、まずは基本となる二分割や三分割のレイアウトを繰り返し練習し、数字の組み合わせに慣れることが大切です。そこから徐々に非対称レイアウトや複数行の構成に挑戦していくことで、より実践的なスキルが身についていきます。Bootstrapのグリッドはシンプルでありながら奥が深く、使いこなすことでデザインの幅が大きく広がります。

サンプルプログラムで復習


<div class="container">
    <div class="row">
        <div class="col-4 bg-primary text-white p-3">コンテンツ1</div>
        <div class="col-4 bg-success text-white p-3">コンテンツ2</div>
        <div class="col-4 bg-warning text-dark p-3">コンテンツ3</div>
    </div>
    <div class="row mt-3">
        <div class="col-3 bg-light border p-3">サイド</div>
        <div class="col-9 bg-white border p-3">メインコンテンツ</div>
    </div>
</div>

ブラウザ表示

先生と生徒の振り返り会話

生徒

グリッドシステムって難しそうだと思っていましたが、十二分割のルールを知ってから一気に理解しやすくなりました。

先生

そうですね。難しく見えるのは最初だけで、実はとてもシンプルな仕組みです。数字の合計が十二になるように考えるだけで、自由にレイアウトが組めます。

生徒

rowとcolの関係も大事なんですね。順番を守らないと表示が崩れる理由がわかりました。

先生

その通りです。基本の構造を守ることが、きれいな画面作りの第一歩です。慣れてきたら自動幅や非対称レイアウトにも挑戦してみてください。

生徒

これからは画面を見るときに、どんな分割で作られているのか考えてみます。