2カラム・3カラムのレイアウトテンプレート集！Bootstrapで作る基本の12分割構成

1. 2カラムレイアウト（7:5）の作り方と実例

1. 2カラムレイアウト（7:5）の作り方と実例

Bootstrapのグリッドシステムで最も汎用性が高いのが、この「7:5」の比率で作る2カラムレイアウトです。画面全体を12分割と考え、左側に「7」、右側に「5」の幅を割り振ることで、メインコンテンツとサイドバーのような、視覚的にバランスの良い構成が簡単に作れます。

プログラミングが初めての方でも、row（行）という箱の中に、col-7（幅7）と col-5（幅5）という2つの箱を入れるだけだと考えれば非常にシンプルです。合計が「12」になれば、きれいに1行に収まります。

<div class="container mt-3">
    <div class="row">
        <div class="col-7 bg-light border p-3">
            <h5>メインコンテンツ（col-7）</h5>
            <p>ここには文章や画像など、ページの主役となる内容を配置します。12分割のうちの7つ分を使うので、ゆったりとした広さが確保できます。</p>
            <img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-fluid">
        </div>
        <div class="col-5 bg-secondary text-white border p-3">
            <h5>サイド情報（col-5）</h5>
            <p>お知らせやリンク集など、補足的な情報を入れるのにちょうど良いサイズ感です。</p>
        </div>
    </div>
</div>

2. 3カラムレイアウト（4:4:4）

2. 3カラムレイアウト（4:4:4）

カラム3つを均等に分けたレイアウト。col-4を3つ使って合計12にします。

<div class="container">
  <div class="row">
    <div class="col-4 bg-light border">カラム1（4）</div>
    <div class="col-4 bg-warning border">カラム2（4）</div>
    <div class="col-4 bg-light border">カラム3（4）</div>
  </div>
</div>

3. 幅比率を自由にカスタマイズする

3. 幅比率を自由にカスタマイズする

col-3 や col-9 のように幅の比率を変えることで、左が狭く右が広いといったデザインにも対応できます。

<div class="container">
  <div class="row">
    <div class="col-3 bg-info border">ナビ（3）</div>
    <div class="col-9 bg-dark text-white border">メインコンテンツ（9）</div>
  </div>
</div>

4. 合計12を守るのが基本ルール

4. 合計12を守るのが基本ルール

Bootstrapでは、1行（row）に含めるカラム（col-●）の合計を12以内にするのが基本です。

たとえば、col-6を2つなら合計12ですが、col-6を3つ使うと合計18となり、はみ出した分は次の行に折り返されます。

カラムを複数入れるときは、合計が12になるように意識しましょう。

5. col-●とcol-md-●の違いとは？

5. col-●とcol-md-●の違いとは？

col-●は常にその幅で表示されますが、col-md-●は「画面幅768px以上で適用される」ブレークポイント付きのクラスです。

スマホでも同じ幅にしたい場合は、今回のように col-● を使えば簡単です。

スマホでは縦並び、タブレット以上では横並びにしたいときは、col-md-● を使います（今回は使っていません）。

6. col-autoとcolを使えば柔軟な自動幅に

6. col-autoとcolを使えば柔軟な自動幅に

Bootstrapでは、col-auto を使うと中身に合わせて自動で幅が決まります。

一方 col は、残りのスペースを均等に分けます。組み合わせれば、より柔軟なレイアウトになります。

例：

<div class="container">
  <div class="row">
    <div class="col-auto bg-light border">自動幅</div>
    <div class="col bg-secondary text-white border">残りを全部使う</div>
  </div>
</div>

まとめ

まとめ

Bootstrapの12分割構成を用いた2カラムや3カラムのレイアウトは、現代のWeb制作において非常に重要な基本構造です。とくに、左右の幅を数値で柔軟に調整できる点は、情報量に合わせた読みやすいページ設計に直結し、多くのWebページで自然に活用されています。固定幅で扱えるcol-●クラス、残りを自動で均等に割り当てるcol、中身に応じて幅が決まるcol-autoなど、数値と構造を組み合わせることで、直感的で視覚的にも整理されたレイアウトを作ることができます。 たとえば、7:5の2カラム構成は文章と画像のバランスを美しく配置でき、4:4:4の3カラム構成は均等に要素を並べたいときに最適です。こうした明確な数値割合はレイアウトのイメージを掴みやすく、制作中の調整もしやすくなります。読者の視線移動も自然になり、伝えたい情報をより強調できるため、実務でも非常によく使われる構成方法です。

<div class="container">
  <div class="row">
    <div class="col-6 bg-light border">エリアA（6）</div>
    <div class="col-6 bg-secondary text-white border">エリアB（6）</div>
  </div>
  <div class="row mt-3">
    <div class="col-4 bg-warning border">ボックス1（4）</div>
    <div class="col-4 bg-light border">ボックス2（4）</div>
    <div class="col-4 bg-warning border">ボックス3（4）</div>
  </div>
</div>

数値ベースで考えると、12の中でどのように幅を配分するかが明確になり、レイアウト設計の精度とスピードが向上します。たとえば6+6の2カラム、3+9の非対称構成、4+4+4の3カラムなど、用途に応じて最適な比率を選ぶことができます。こうした基本を理解し、12という軸を常に意識することで、複雑なデザインにも柔軟に対応できるようになります。 今回の学びを通して、2カラム・3カラムの特徴、12分割を基準にした幅調整、自動幅との組み合わせなど、レイアウトに必要な土台がしっかり身についたはずです。今後はより高度な構成に挑戦しながら、サイト全体の見やすさやバランスを整える技術を磨いていきましょう。