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）の作り方

Bootstrapのグリッドシステムにおいて、画面を均等に3分割する「3カラムレイアウト」は、サービスの強みを紹介したり、記事のカード並べたりする際に最もよく使われる王道のデザインです。

仕組みはとてもシンプルです。Bootstrapでは横幅を最大「12」として考えるため、「4 + 4 + 4 = 12」となるように、col-4というクラスを3つ並べるだけで、プログラミング初心者の方でも簡単にきれいな整列レイアウトが作成できます。

<div class="container text-center">
  <div class="row">
    <div class="col-4 p-3 bg-light border">
      <h5>ポイント1</h5>
      <p class="small">左側のカラムです</p>
    </div>
    <div class="col-4 p-3 bg-warning-subtle border">
      <h5>ポイント2</h5>
      <p class="small">真ん中のカラムです</p>
    </div>
    <div class="col-4 p-3 bg-light border">
      <h5>ポイント3</h5>
      <p class="small">右側のカラムです</p>
    </div>
  </div>
</div>

この設定を使うメリットは、特別なCSSを書かなくても、枠内の余白（パディング）や背景色を調整するだけで、プロのようなWebサイトの構造がすぐに手に入ることです。まずはこの「合計12にする」というルールをマスターしましょう。

3. グリッドの幅比率を自由にカスタマイズする（col-*の使い方）

3. グリッドの幅比率を自由にカスタマイズする（col-*の使い方）

Bootstrapのグリッドシステムは、横幅を「12等分」して考えます。これまでは均等に分ける方法を見てきましたが、col-3 や col-9 のように数字を指定することで、コンテンツの重要度に合わせて「左側は狭く、右側は広く」といった実用的なレイアウトが自由自在に作れます。

例えば、ブログのサイドメニュー（ナビゲーション）とメイン記事の書き分けなどは、この比率カスタマイズの定番です。プログラミング未経験の方でも、「合計して12になるように数字を選ぶ」というルールさえ覚えれば、デザインの幅が一気に広がります。以下のサンプルで、実際に幅が変わる様子を確認してみましょう。

<div class="container text-center">
  <div class="row">
    <div class="col-3 bg-info p-3 border">
      サイドナビ（col-3）
    </div>
    <div class="col-9 bg-light p-3 border">
      メインコンテンツ（col-9）
      <p class="mt-2 small text-muted">ここはメイン領域なので、広くスペースを使っています。</p>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-4 bg-warning p-3 border">
      メニュー（col-4）
    </div>
    <div class="col-8 bg-white p-3 border">
      お知らせ（col-8）
    </div>
  </div>
</div>

このように、col- の後ろに続く数字を調整するだけで、複雑な計算をすることなく直感的にマルチデバイス対応のレイアウトを構築できるのがBootstrapの最大の強みです。合計が12を超えると自動的に改行される仕組みになっているため、まずは「合計12」を意識して作成してみるのがコツです。

4. グリッドシステムの心臓部「合計12」の鉄則

4. グリッドシステムの心臓部「合計12」の鉄則

Bootstrapのレイアウトを自由自在に操るための最も重要なルール、それが「1行の合計を12にする」ことです。Bootstrapでは横幅を12等分した設計図が用意されており、配置するカラム（col-●）の数字を足して「12」にぴったり収めるのが基本の形となります。

実際に「合計12」で分割してみよう

まずはプログラミング未経験の方でも分かりやすい、2等分と3等分のシンプルなサンプルを見てみましょう。背景に色をつけて、幅がどう分かれているか確認しやすくしています。

<style>
  .demo-col {
    padding: 15px;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    text-align: center;
  }
</style>

<div class="container">
  <p class="fw-bold">■ 6 + 6 = 12（2等分）</p>
  <div class="row mb-3">
    <div class="col-6 demo-col">col-6</div>
    <div class="col-6 demo-col">col-6</div>
  </div>

  <p class="fw-bold">■ 4 + 4 + 4 = 12（3等分）</p>
  <div class="row">
    <div class="col-4 demo-col">col-4</div>
    <div class="col-4 demo-col">col-4</div>
    <div class="col-4 demo-col">col-4</div>
  </div>
</div>

もしも「12」を超えてしまったら？

例えば、col-6（半分）を3つ並べようとすると、合計は18になります。この場合、12を超えた分のカラムは自動的に「次の行」へと押し出されて表示されます。

意図しない段ずれを防ぐためにも、まずは「1行のなかで作りたい列の合計を12にする」という感覚をマスターしましょう。この基本さえ押さえれば、複雑なレスポンシブデザインも驚くほど簡単に作れるようになります。

5. col-●とcol-md-●の違いとは？スマホ対応の基本をマスター

5. col-●とcol-md-●の違いとは？スマホ対応の基本をマスター

Bootstrapを使ってレイアウトを作る際、初心者の方が一番迷いやすいのがcol-●とcol-md-●の使い分けです。この違いを理解すると、「スマホでは縦に並べ、パソコンでは横に並べる」といった、Webサイトに欠かせない「レスポンシブデザイン」が自由自在に操れるようになります。

① col-●（常に横並びを維持する）

col-●は、画面の大きさに関係なく、常にその幅で表示されます。例えば「スマホでもパソコンでも、絶対に2つ並べて表示したい！」という場合に最適です。

② col-md-●（画面幅でレイアウトを切り替える）

一方でcol-md-●は、「画面の横幅が768px（一般的なタブレットサイズ）以上」のときにだけ適用される指示です。これを使うと、次のような動きを自動で実現できます。

• スマホ（768px未満）： 1つひとつの枠が横いっぱいに広がり、縦に積み重なる。
• PC・タブレット（768px以上）： 指定した幅で横にきれいに並ぶ。

プログラミング未経験の方でも分かりやすいように、実際に表示が変わるサンプルを見てみましょう。今回は「スマホでは2つ並び」と「スマホでは縦並び」の2つのパターンを比較します。

<div class="container text-center">
  <p class="mt-4 fw-bold text-primary">【パターンA】スマホでもPCでもずっと横並び</p>
  <div class="row">
    <div class="col-6 p-3 bg-light border">常に半分（col-6）</div>
    <div class="col-6 p-3 bg-light border">常に半分（col-6）</div>
  </div>

  <p class="mt-4 fw-bold text-success">【パターンB】スマホは縦並び / PCは横並び</p>
  <div class="row">
    <div class="col-md-6 p-3 bg-info text-white border">スマホは縦 / PCは横（col-md-6）</div>
    <div class="col-md-6 p-3 bg-info text-white border">スマホは縦 / PCは横（col-md-6）</div>
  </div>
</div>

このように、Bootstrapのクラス名を少し変えるだけで、デバイスごとに最適な見せ方が可能です。今回の解説のように、常に同じ比率で並べたい場合はシンプルなcol-●を使えば間違いありません。

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分割を基準にした幅調整、自動幅との組み合わせなど、レイアウトに必要な土台がしっかり身についたはずです。今後はより高度な構成に挑戦しながら、サイト全体の見やすさやバランスを整える技術を磨いていきましょう。