カテゴリ: Bootstrap 更新日: 2026/02/11

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

2カラム・3カラムのレイアウトテンプレート集(12分割の基本)
2カラム・3カラムのレイアウトテンプレート集(12分割の基本)

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

生徒

「Bootstrapでウェブサイトのレイアウトを2カラムや3カラムにしたいんですが、どうやってやるんですか?」

先生

「Bootstrapのグリッドシステムを使えば、HTMLだけで簡単に2カラムや3カラムのレイアウトを作ることができますよ。」

生徒

「col-md-ってよく見ますが、あれは何ですか?」

先生

「いい質問ですね。今回はもっとシンプルに、常に固定幅で表示される col-● を使ったテンプレートだけに絞って紹介します!」

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

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>
ブラウザ表示

このレイアウトのポイントは、数値を変えるだけで簡単に印象を変えられる点です。例えば、もっとメインを広くしたい場合は「8:4」、少し差を縮めたい場合は「7:5」といった具合に、合計12のルールを守りながらカスタマイズを楽しんでみてください。

2. 3カラムレイアウト(4:4:4)

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. 幅比率を自由にカスタマイズする
3. 幅比率を自由にカスタマイズする

col-3col-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を守るのが基本ルール
4. 合計12を守るのが基本ルール

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

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

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

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

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

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

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

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

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

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

生徒「数字で考えるとすごく分かりやすくなりました。7:5や4:4:4の形が頭に入りやすいです!」

先生「数字は視覚的にも整理しやすいので、レイアウトの基本を理解するには非常に便利ですね。」

生徒「3カラムの構成も用途に合わせて使えそうです。項目の並びが統一されて見やすいです。」

先生「その調子です。数字の割り当てを自在に扱えるようになると、ページ設計の自由度が一気に高まりますよ。」

2026年最新 スキルアップ・実践セミナー

【60分集中】CSSを1行も書かない!?Bootstrap 5ユーティリティクラス活用で開発工数を50%削減

「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。

本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。

具体的なワークショップ内容と環境

【つくるもの】
モダンなランディングページ(LP)やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。

【開発環境】
VS CodeにBootstrap 5専用のSnippet(補完機能)を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度(Core Web Vitals)を意識した最適な読み込み設定など、プロの初期設定を伝授します。

この60分で得られる3つの革新スキル

1. グリッドシステムの完全マスター

スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。

2. ユーティリティクラスによる爆速デザイン

CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。

3. 脱・標準デザインのカスタマイズ

「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。

※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。

【60分集中】CSSを1行も書かない!?Bootstrap 5ユーティリティクラス活用で開発工数を50%削減

Bootstrap 5を楽しみながら、一緒に学びましょう!

各回少人数・マンツーマン形式で徹底サポート

このセミナーの詳細・お申し込みはこちら
カテゴリの一覧へ
新着記事
New1
CSS
CSSのcolumn-countを完全ガイド!初心者でもわかる複数列レイアウトの作り方
New2
CSS
CSSのz-indexとposition完全ガイド!初心者でもわかる要素を重ねる方法
New3
Bootstrap
Bootstrapオフキャンバス入門:.offcanvasと.offcanvas-start・end・top・bottomの基本をやさしく解説
New4
CSS
CSSのoverflowプロパティ完全ガイド!初心者でもわかるvisible・hidden・scroll・autoの違い
人気記事
No.1
Java&Spring記事人気No1
CSS
CSSで文字の間隔を調整する方法!初心者でもわかるletter-spacingとword-spacingの使い方
No.2
Java&Spring記事人気No2
CSS
CSSで要素のサイズを自動調整!autoとfit-contentの使い方
No.3
Java&Spring記事人気No3
CSS
CSSのmarginとpaddingの違いとは?初心者でもわかるボックス間のスペース調整の基本
No.4
Java&Spring記事人気No4
CSS
CSSのoverflowプロパティ完全ガイド!初心者でもわかるvisible・hidden・scroll・autoの違い
No.5
Java&Spring記事人気No5
Bootstrap
Bootstrap Iconsのライセンスと商用利用の注意点【著作権と表記を初心者向けに解説】
No.6
Java&Spring記事人気No6
CSS
CSSの文字色と背景色をやさしく解説!初心者でもわかる基本の設定方法
No.7
Java&Spring記事人気No7
HTML
HTMLのliタグとは?初心者でもわかるul・ol内での正しい役割を完全解説
No.8
Java&Spring記事人気No8
CSS
CSSの状態によるセレクタ完全ガイド!初心者でもわかる:checkedと:disabledの使い方