Bootstrapの2カラム・3カラム王道レイアウト集！初心者でもわかるサイドバーとコンテンツ比率の基本

2カラム/3カラムの王道レイアウト集：サイドバー/コンテンツの比率

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

生徒

「ブログみたいに、左にメニューで右に本文がある画面を作りたいです」

先生

「それは2カラムレイアウトと呼ばれる基本的な形ですね。Bootstrapを使うと簡単に作れます。」

生徒

「3つに分かれているサイトも見たことがあります！」

先生

「それが3カラムレイアウトです。比率を理解すると迷わなくなりますよ。」

1. 2カラムと3カラムとは何かをやさしく理解しよう

カラムとは、画面を縦に区切った列のことです。2カラムは縦に2つ、3カラムは縦に3つに分けたレイアウトを指します。新聞やチラシを思い浮かべると分かりやすいです。

左にメニュー、右に本文がある形は2カラム、左にメニュー、真ん中に本文、右に補足情報がある形は3カラムです。Bootstrapでは、この形を簡単に作れる仕組みが用意されています。

2. Bootstrapのグリッドと12分割の考え方

Bootstrapでは、画面の横幅を12個に分けて考えます。これを12分割グリッドと呼びます。難しく聞こえますが、12個のブロックをどう組み合わせるか、というだけです。

たとえば、12のうち3と9に分ければ、左が細く右が広い2カラムになります。6と6なら同じ幅の2カラムです。数字の足し算が12になれば正解です。

3. 王道の2カラムレイアウト例サイドバー3 コンテンツ9

もっともよく使われるのが、サイドバーが細く、コンテンツが広い2カラム構成です。ブログや解説サイトで定番の形です。


<div class="container">
    <div class="row">
        <div class="col-md-3 bg-light">
            サイドバー
        </div>
        <div class="col-md-9">
            メインコンテンツ
        </div>
    </div>
</div>

ブラウザ表示

左が3、右が9なので、全体で12になります。数字を見るだけで、だいたいの幅のイメージができるようになります。

4. 同じ幅で見やすい2カラムレイアウト例 6と6

情報を同じくらいの重さで見せたい場合は、左右を同じ幅にします。商品比較や説明と画像を並べるときに便利です。


<div class="container">
    <div class="row">
        <div class="col-md-6 bg-light">
            左の内容
        </div>
        <div class="col-md-6 bg-secondary text-white">
            右の内容
        </div>
    </div>
</div>

ブラウザ表示

左右が同じ幅なので、見た目が安定し、初心者でもレイアウトの崩れが起きにくいです。

5. 王道の3カラムレイアウトの基本構成

3カラムレイアウトは、情報量が多いサイトで使われます。左右が補助的な情報で、真ん中がメインという形が一般的です。


<div class="container">
    <div class="row">
        <div class="col-md-3 bg-light">
            左サイド
        </div>
        <div class="col-md-6">
            メインコンテンツ
        </div>
        <div class="col-md-3 bg-light">
            右サイド
        </div>
    </div>
</div>

ブラウザ表示

3と6と3で合計12になります。真ん中を一番広くすると、読む人の視線が自然に集まります。

6. サイドバーが広めの3カラムレイアウト

ナビゲーションやカテゴリが多い場合は、サイドバーを少し広めにすることもあります。比率を変えるだけで印象が変わります。


<div class="container">
    <div class="row">
        <div class="col-md-4 bg-light">
            左メニュー
        </div>
        <div class="col-md-5">
            本文
        </div>
        <div class="col-md-3 bg-light">
            補足情報
        </div>
    </div>
</div>

ブラウザ表示

必ずしも左右対称である必要はありません。用途に合わせて比率を考えることが大切です。