English 中文 العربية 日本語 Português

Bootstrap: グリッドシステム

最終更新：2026-08-26

1. はじめに

(1) 前提条件

(2) 🎯 学習目標

(3) 課題

Aliceは前回のレッスンでFlexboxを使ってナビバーを作成しました。今度は、彼女のホームページのメインコンテンツのレイアウトを作成したいと考えています。それは、左サイドバー（3カラム）+ 右コンテンツエリア（9カラム）です。従来のCSSレイアウトで、複雑なレスポンシブなマルチカラム構造を実装するのは非常に面倒です。

(4) 解決策

Bootstrapのグリッドシステムを使えば、<div class="row"><div class="col-3">サイドバー</div><div class="col-9">コンテンツ</div></div> と記述するだけです。グリッドはBootstrapのコアとなるレイアウトツールであり、12カラムのFlexboxグリッドに基づいています。row + col-* を使うことで、任意の複雑さのページレイアウトを構築できます。

考え方のヒント: グリッドはExcelのスプレッドシートのようなものです。1行が row で、均等に12の等分に分けられます。col-4 は4部分を占め、col-8 は8部分を占め、合計でちょうど12になります。

(5) メリット

グリッドシステムを使用した結果、Aliceはわずか数行のタグで、左3カラム、右9カラムという古典的なブログレイアウトを完成させました。ブレイクポイントサフィックスと組み合わせることで、レスポンシブな適応を容易に実現しました。

2. 基本構造

グリッドは常にContainer -> Row -> Column のネスト構造に従います：

HTML 
<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

▶ サンプル 基本グリッドレイアウト

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Basics</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-col { background: #0d6efd; color: #fff; padding: 1rem; border: 1px solid #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">
    <div class="row mb-3">
      <div class="col demo-col">col (4/12)</div>
      <div class="col demo-col">col (4/12)</div>
      <div class="col demo-col">col (4/12)</div>
    </div>
    <div class="row mb-3">
      <div class="col-4 demo-col" style="background: #198754;">col-4</div>
      <div class="col-8 demo-col" style="background: #dc3545;">col-8</div>
    </div>
    <div class="row">
      <div class="col-3 demo-col" style="background: #6f42c1;">col-3</div>
      <div class="col demo-col" style="background: #fd7e14;">col (auto)</div>
      <div class="col-3 demo-col" style="background: #20c997;">col-3</div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

(1) カラムの挙動比較

クラス 挙動 ユースケース
col 残りのスペースを均等に分割 等幅カラム
col-{n} n/12 の固定幅 固定比率のレイアウト
col-auto コンテンツに合わせた幅 ボタングループ、バッジ
col-{breakpoint} ブレイクポイント未満で全幅、以上で比例 レスポンシブレイアウト

3. レスポンシブカラム

HTML 
<div class="row">
  <div class="col-12 col-md-6 col-lg-4 bg-primary p-3 text-white">サイドバー</div>
  <div class="col-12 col-md-6 col-lg-8 bg-info p-3 text-white">コンテンツ</div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

構文 < 768px 768-991px >= 992px
col-12 col-md-6 col-lg-4 全幅 1/2幅 1/3幅
col-6 col-md-4 col-xl-3 1/2幅 1/3幅 1/4幅
col-md-8 全幅 2/3幅 2/3幅

4. 複数行と折り返し

1行のカラムの合計数が12を超えると、余分なカラムは自動的に次の行に折り返されます：

HTML 
<div class="row">
  <div class="col-4 bg-primary p-3 text-white">4</div>
  <div class="col-4 bg-success p-3 text-white">4</div>
  <div class="col-4 bg-danger p-3 text-white">4</div>
  <div class="col-4 bg-warning p-3">4（次の行に折り返し）</div>
  <div class="col-4 bg-info p-3 text-white">4</div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

5. オフセット

HTML 
<div class="row">
  <div class="col-3 bg-primary p-3 text-white">サイドバー</div>
  <div class="col-6 offset-3 bg-info p-3 text-white">右に3カラムオフセット</div>
</div>

<div class="row">
  <div class="col-6 offset-3 bg-success p-3 text-white text-center">
    中央揃えカラム (col-6 + offset-3)
  </div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

構文 効果
col-6 offset-3 6カラム中央揃え
col-4 offset-4 4カラム中央揃え
col-8 offset-2 8カラム左オフセット

6. ネスト

カラムの中にさらに row + col のセットをネストします：

HTML 
<div class="row">
  <div class="col-8 bg-light p-3">
    <h6>メインセクション</h6>
    <div class="row">
      <div class="col-6 bg-primary text-white p-2">ネストされた6</div>
      <div class="col-6 bg-success text-white p-2">ネストされた6</div>
    </div>
  </div>
  <div class="col-4 bg-info p-3 text-white">サイドバー</div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。 ネストされたグリッド内のカラムの合計も12ですが、これは親カラム（コンテナではなく）に対して計算されます。

7. ガター

HTML 
<div class="row g-0">
  <div class="col-6"><div class="bg-primary text-white p-3">g-0: 間隔なし</div></div>
  <div class="col-6"><div class="bg-success text-white p-3">g-0: 間隔なし</div></div>
</div>

<div class="row g-4 mt-2">
  <div class="col-6"><div class="bg-primary text-white p-3">g-4: 24px間隔</div></div>
  <div class="col-6"><div class="bg-success text-white p-3">g-4: 24px間隔</div></div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

クラス 水平方向 垂直方向
g-0 0 0
g-3 1rem 1rem
g-5 3rem 3rem
gx-4 1.5rem 0
gy-4 0 1.5rem

8. グリッドアーキテクチャとリファレンス

(1) グリッドシステムアーキテクチャ

100% 
graph TB
    subgraph コンテナ層
        A[.container / .container-fluid] --> B[最大幅 + 水平パディング]
    end
    subgraph 行層
        B --> C[.row]
        C --> D[コンテナのパディングを相殺するネガティブマージン]
        C --> E[ガター間隔制御]
    end
    subgraph カラム層
        D --> F[.col-*]
        E --> F
        F --> G[12カラムフレックスシステム]
        F --> H[レスポンシブブレイクポイント col-md-*]
        F --> I[オフセット offset-*]
        F --> J[順序 order-*]
    end
    subgraph サブコンテンツ
        G --> K[ネストされたグリッド row > col]
        H --> K
        I --> K
    end

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

(2) グリッドレベルリファレンス

レベル 要素 クラス 幅 説明
コンテナ <div> container レスポンシブ固定幅 中央揃え、最大幅を制限
コンテナ <div> container-fluid 100% 全幅
コンテナ <div> container-{sm|md|lg|xl|xxl} 対応するブレイクポイント 指定されたブレイクポイントまで全幅
行 <div> row 100% + ネガティブマージン フレックスコンテナ
カラム <div> col 自動分割 自動サイジング
カラム <div> col-{n} n/12 固定比率
カラム <div> col-{bp}-{n} レスポンシブ ブレイクポイント以上で比例

(3) グリッドブレイクポイントカラムリファレンス

クラス名 <576px >=576px >=768px >=992px >=1200px >=1400px
col-12 100% 100% 100% 100% 100% 100%
col-sm-6 100% 50% 50% 50% 50% 50%
col-md-4 100% 100% 33.3% 33.3% 33.3% 33.3%
col-lg-3 100% 100% 100% 25% 25% 25%
col-xl-2 100% 100% 100% 100% 16.67% 16.67%
col-12 col-md-6 col-lg-4 100% 100% 50% 33.3% 33.3% 33.3%
col-6 col-md-4 col-xl-3 50% 50% 33.3% 33.3% 25% 25%

▶ サンプル ブログページレイアウト

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Layout</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <header class="mb-4">
      <h1>My Blog</h1>
      <p class="text-muted">テクノロジーと思想を共有</p>
    </header>

    <div class="row g-4">
      <!-- メインコンテンツ -->
      <article class="col-12 col-lg-8">
        <div class="card mb-3">
          <div class="card-body">
            <h2 class="card-title h4">動作するグリッドレイアウト</h2>
            <p class="card-text text-muted small">2026年1月20日</p>
            <p>col-8 + col-4 を使用して、記事エリアが左、サイドバーが右の古典的なブログレイアウトを作成します。</p>
            <button class="btn btn-sm btn-primary">続きを読む</button>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h2 class="card-title h4">Bootstrap 5の新機能</h2>
            <p class="card-text text-muted small">2026年1月18日</p>
            <p>Bootstrap 5は、CSS変数、改善されたグリッドシステム、新しいユーティリティクラスを導入しています。</p>
            <button class="btn btn-sm btn-primary">続きを読む</button>
          </div>
        </div>
      </article>

      <!-- サイドバー -->
      <aside class="col-12 col-lg-4">
        <div class="bg-light p-4 rounded">
          <h5>著者について</h5>
          <p class="small mb-0">フロントエンド技術とUIデザインに情熱を持つフルスタック開発者。</p>
        </div>
        <div class="bg-light p-4 rounded mt-3">
          <h5>カテゴリ</h5>
          <ul class="list-unstyled small mb-0">
            <li>フロントエンド (12)</li>
            <li>バックエンド (8)</li>
            <li>デザイン (5)</li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

▶ サンプル ダッシュボードグリッド

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid py-4 bg-light" style="min-height: 100vh;">
    <h3 class="mb-4">ダッシュボード</h3>

    <!-- 統計行 -->
    <div class="row g-3 mb-4">
      <div class="col-6 col-xl-3">
        <div class="bg-primary text-white p-3 rounded">
          <h6 class="mb-1">ユーザー</h6>
          <h3 class="mb-0">1,284</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-success text-white p-3 rounded">
          <h6 class="mb-1">注文</h6>
          <h3 class="mb-0">356</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-warning text-dark p-3 rounded">
          <h6 class="mb-1">売上</h6>
          <h3 class="mb-0">$12,450</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-info text-white p-3 rounded">
          <h6 class="mb-1">アクティビティ</h6>
          <h3 class="mb-0">78%</h3>
        </div>
      </div>
    </div>

    <!-- チャート + テーブル -->
    <div class="row g-3">
      <div class="col-12 col-lg-8">
        <div class="bg-white p-4 rounded shadow-sm">
          <h5>チャートエリア</h5>
          <div class="bg-light" style="height: 200px;"></div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="bg-white p-4 rounded shadow-sm">
          <h5>最近のアクティビティ</h5>
          <ul class="list-unstyled small mb-0">
            <li class="mb-2">Zhang Sanが新しいアカウントを登録</li>
            <li class="mb-2">Li Siが注文を提出</li>
            <li>Wang Wuがプロフィールを更新</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

▶ サンプル ネストされたグリッド

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .outer { background: #e9ecef; border: 2px dashed #0d6efd; padding: 1rem; }
    .inner { background: #0d6efd; color: #fff; padding: 0.75rem; border: 1px solid #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-3">ネストされたグリッドデモ</h3>

    <div class="row">
      <div class="col-8">
        <div class="outer">
          <h6>メインカラム col-8</h6>
          <div class="row g-2">
            <div class="col-6"><div class="inner">ネストされた col-6</div></div>
            <div class="col-6"><div class="inner">ネストされた col-6</div></div>
            <div class="col-4"><div class="inner">ネストされた col-4</div></div>
            <div class="col-4"><div class="inner">ネストされた col-4</div></div>
            <div class="col-4"><div class="inner">ネストされた col-4</div></div>
          </div>
          <p class="small mt-2 mb-0">ネストされたグリッドの12カラムは親カラムに対して計算されます</p>
        </div>
      </div>
      <div class="col-4">
        <div class="outer" style="height: 100%;">
          <h6>サイドバー col-4</h6>
          <p class="small mb-0">サイドバーの高さはメインカラムのコンテンツに自動的に合わせられます</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

▶ サンプル レスポンシブ商品グリッド

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">商品リスト</h3>

    <div class="row g-3 g-lg-4">
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/0d6efd/fff?text=Product1" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">商品名</h6>
            <p class="card-text text-danger fw-bold mb-0">$99.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/198754/fff?text=Product2" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">商品名</h6>
            <p class="card-text text-danger fw-bold mb-0">$149.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/dc3545/fff?text=Product3" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">商品名</h6>
            <p class="card-text text-danger fw-bold mb-0">$199.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/ffc107/000?text=Product4" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">商品名</h6>
            <p class="card-text text-danger fw-bold mb-0">$59.00</p>
          </div>
        </div>
      </div>
    </div>

    <p class="text-muted small mt-3">
      レスポンシブ: モバイル2カラム (col-6) → タブレット3カラム (col-md-4) → デスクトップ4カラム (col-lg-3)、間隔 g-3 → g-lg-4
    </p>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネント（例：ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

❓ よくある質問

Q 1行のカラムの合計数が12未満の場合、どうなりますか？
A 右側のスペースは空いたままになります。例えば、col-4 + col-4 は 8/12 を占め、4/12 が空きます。残りのスペースを埋める必要がある場合は、col（自動サイズ）を使用してください。
Q グリッドのガターとスペーシングユーティリティクラス gap-* の違いは何ですか？
A g-*（ガター）はグリッド固有のもので、row に適用することでカラム間の間隔を制御します。gap-* は汎用のフレックス/グリッドユーティリティクラスです。グリッドレイアウトでは、g-* が推奨されます。
Q なぜグリッドカラムが同じ行にならないのですか？
A 最も一般的な理由: (1) カラムが row の中に入っていない；(2) row がコンテナ（container/container-fluid）の外にある；(3) カラムの合計幅が12を超え、折り返しが発生している。
Q col と col-12 は同じですか？
A 見た目は同じ（どちらも100%幅）ですが、挙動が異なります。col は flex: 1 0 0% を使用し、他の col 要素間で利用可能なスペースを均等に分割します。col-12 は固定の width: 100% を持っています。
Q グリッド内で垂直方向の配置をどうやって実現しますか？
A グリッドカラムもFlexboxの子要素なので、align-items-* や align-self-* ユーティリティクラスを直接使用できます。row に align-items-center を追加すると、行内のすべてのカラムが垂直方向に中央揃えになります。特定の col に align-self-end を追加すると、下端に配置されます。

📖 まとめ

📝 練習問題

  1. ⭐ 標準的なブログレイアウトを作成: モバイルで全幅表示、デスクトップで左 col-8 記事エリア + 右 col-4 サイドバー。
  2. ⭐⭐ グリッドを使用して4カラムのカードグリッドを実装: モバイルで1カラム (col-12)、タブレットで2カラム (col-md-6)、デスクトップで4カラム (col-lg-3)、カード間には g-4 の間隔を設定。
  3. ⭐⭐⭐ 非対称レイアウトを作成: サイドバー col-3 + コンテンツエリア col-6 + 右側の小さなウィジェット col-3。

前回のレッスン: レスポンシブデザイン · 次のレッスン: ナビバー

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%