Bootstrapグリッドシステム完全入門｜2カラム・3カラム・4カラム王道レイアウトテンプレート集【初心者向け】

2カラム・3カラム・4カラムの王道レイアウトテンプレート集

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

生徒

「Bootstrapって聞いたことはあるんですが、カラムとかグリッドって何ですか？」

先生

「Bootstrapは、画面のレイアウトを簡単に整えられる便利な道具箱のようなものです。その中でもグリッドシステムは、画面をきれいに区切るための仕組みです。」

生徒

「2カラムとか3カラムって、よく聞きますがどういう意味ですか？」

先生

「画面を横に何分割するか、という考え方です。では、順番に見ていきましょう。」

1. Bootstrapのグリッドシステムとは何か

Bootstrapのグリッドシステムとは、画面の横幅を12個に分けてレイアウトを考える仕組みです。12という数字は、2でも3でも4でも割り切れるため、とても使いやすい数です。

イメージとしては、ノートを横に12マスの方眼で区切り、そのマスを何個使うかで配置を決める感じです。パソコンやスマートフォンなど、画面サイズが変わっても自動で整えてくれます。

2. カラムと行の基本ルール

Bootstrapでは、横の並びを「行」、その中の区切りを「カラム」と呼びます。行の中にカラムを入れる、という順番がとても大切です。

これは、お弁当箱に例えると分かりやすいです。まず大きなお弁当箱があって、その中に仕切りを入れておかずを分ける、というイメージです。

3. 2カラムレイアウトの王道テンプレート

2カラムレイアウトは、左にメニュー、右に本文という構成でよく使われます。ブログや企業サイトで最も定番の形です。


<div class="container">
    <div class="row">
        <div class="col-4">
            <p>左メニュー</p>
        </div>
        <div class="col-8">
            <p>メインコンテンツ</p>
        </div>
    </div>
</div>

ブラウザ表示

12分割のうち、左に4、右に8を使っています。数字を足すと12になる点が重要です。

4. 3カラムレイアウトの基本パターン

3カラムレイアウトは、情報を均等に並べたいときに便利です。サービス紹介や特徴説明などによく使われます。


<div class="container">
    <div class="row">
        <div class="col-4">内容1</div>
        <div class="col-4">内容2</div>
        <div class="col-4">内容3</div>
    </div>
</div>

ブラウザ表示

同じ幅で3つ並ぶため、見た目がとても整います。初心者でも失敗しにくい構成です。

5. 4カラムレイアウトの使いどころ

4カラムレイアウトは、商品一覧や画像ギャラリーなどでよく使われます。一度に多くの情報を見せたいときに便利です。


<div class="container">
    <div class="row">
        <div class="col-3">A</div>
        <div class="col-3">B</div>
        <div class="col-3">C</div>
        <div class="col-3">D</div>
    </div>
</div>

ブラウザ表示

12を4で割ると3になるため、すべて同じ幅になります。

6. 画面サイズで自動調整される仕組み

Bootstrapの強みは、画面の大きさに応じて自動でレイアウトが変わる点です。これをブレークポイントと呼びます。

難しく考えず、「スマホ用」「タブレット用」「パソコン用」と切り替わる仕組みだと覚えると安心です。

7. 初心者がつまずきやすい注意点

よくある失敗は、カラムの合計が12を超えてしまうことです。その場合、レイアウトが崩れます。

また、行の中に直接文字を書くのではなく、必ずカラムの中に入れる、というルールも大切です。

8. 実務でよく使われる組み合わせ例

実際のWebサイトでは、2カラムと3カラムを組み合わせて使うことが多いです。上は3カラム、下は2カラム、という構成もよく見かけます。

Bootstrapのグリッドシステムを理解すると、デザインの引き出しが一気に増えます。

まとめ

ここまで、Bootstrapのグリッドシステムについて、基本の考え方から実際によく使われる二カラム、三カラム、四カラムのレイアウトパターンまでを順番に見てきました。Bootstrapのグリッドシステムは、画面を十二分割して考えるというシンプルなルールを軸にしているため、初心者でも仕組みを理解しやすく、実務でもそのまま使えるのが大きな特徴です。コンテナ、行、カラムという三つの要素を正しい順番で組み合わせるだけで、パソコン、タブレット、スマートフォンといった異なる画面サイズに対応したレイアウトを自然に作ることができます。

二カラムレイアウトは、左にメニュー、右に本文という定番構成で、ブログや企業サイト、管理画面など幅広い場面で活躍します。三カラムレイアウトは、情報を均等に並べたいときに便利で、サービス紹介や特徴説明、比較表などに向いています。四カラムレイアウトは、商品一覧や画像ギャラリーのように、同じ形式の情報をたくさん並べたい場合に力を発揮します。どのレイアウトでも共通して大切なのは、カラムの合計が必ず十二になるように意識することです。

また、Bootstrapのグリッドシステムでは、画面サイズに応じて自動でレイアウトが調整される仕組みが用意されています。これにより、スマートフォンでは縦並び、パソコンでは横並びといった柔軟な表示が簡単に実現できます。初心者のうちは細かい設定を覚えるよりも、「行の中にカラムを入れる」「カラムの合計は十二」という二点をしっかり身につけることが、レイアウト理解への近道になります。

実務では、単純な二カラムや三カラムだけでなく、セクションごとにレイアウトを切り替えるケースが多くあります。例えば、ページ上部は三カラムで特徴を並べ、下部は二カラムで詳細説明を配置するといった構成です。こうした組み合わせも、Bootstrapのグリッドシステムを理解していれば無理なく対応できます。グリッドを意識して設計することで、見た目が整うだけでなく、後から修正しやすいコードを書くことにもつながります。

以下は、これまで学んだ内容を踏まえたシンプルなサンプル構成です。二カラムと三カラムを組み合わせた、実務でもよく見かけるレイアウト例になります。


<div class="container">
    <div class="row">
        <div class="col-4">
            <p>サイドメニュー</p>
        </div>
        <div class="col-8">
            <div class="row">
                <div class="col-4">特徴一</div>
                <div class="col-4">特徴二</div>
                <div class="col-4">特徴三</div>
            </div>
        </div>
    </div>
</div>

ブラウザ表示

このように、行の中にさらに行とカラムを重ねることで、複雑に見えるレイアウトも整理して作ることができます。最初は難しく感じるかもしれませんが、基本ルールを守って書いていけば、自然と読みやすく管理しやすい構造になります。Bootstrapのグリッドシステムは、一度理解すると他のデザインフレームワークや純粋なスタイル指定を学ぶ際にも役立つ考え方です。

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

生徒

「グリッドシステムって難しそうだと思っていましたが、十二分割という考え方が分かってから一気に理解しやすくなりました。」

先生

「それはとても良い気づきですね。まずは仕組みを単純に捉えることが大切です。」

生徒

「二カラムや三カラムも、数字を足して十二になるように考えればいいんですね。」

先生

「その通りです。慣れてきたら、実際のサイトを見て、どんなカラム構成になっているか観察してみると、理解がさらに深まりますよ。」

生徒

「これからはレイアウトを見る目が変わりそうです。自分でもいろいろ組み合わせて試してみます。」

先生