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

Bootstrap: レイアウトコンテナ

最終更新：2026-08-26

1. はじめに

(1) 前提知識

(2) 🎯 学習目標

(3) 痛点

ボブは基本的なHTMLの学習を終えたばかりです。彼は同じページが異なる画面幅で左右のマージンが不一致になっていることに気づきます。時々端にピッタリで、時々余白が多すぎます。

(4) 解決策

Bootstrapのコンテナは、この問題を解決するために設計されています。コンテナはBootstrapのグリッドシステムの基礎です。すべてのコンテンツはコンテナ内に配置すべきです。コンテナは適切な整列とパディングを提供します。

理解のポイント: コンテナは絵の額のようなものです。コンテンツエリアの幅とマージンを決定し、コンテンツが異なるサイズの「壁」でもきちんと整然と見えるようにします。

(5) 利点

コンテナを使用した後、ボブは異なる画面間のマージン問題について心配する必要がなくなりました。Bootstrapのコンテナは自動的に適切な整列とパディングを提供し、どの画面サイズでもコンテンツをきちんと中央揃えにします。

2. コンテナとは

コンテナの核心機能は、中央揃えと幅の制限です。Bootstrapには3つのコンテナタイプがあります：

コンテナ 動作 一般的な使用例
.container 各ブレークポイントで固定幅、ブレークポイント間でジャンプ 標準コンテンツエリア
.container-fluid 常に width: 100% フル幅セクション（ナビゲーションバー、バナー）
.container-{breakpoint} 指定ブレークポイントの前は100%、後は固定 きめ細かいレスポンシブ制御

(1) 3つのコンテナの比較

HTML 
<div class="container">.container - レスポンシブ固定幅</div>
<div class="container-fluid">.container-fluid - 常に100%幅</div>
<div class="container-md">.container-md - md未満で100%、以上で固定</div>
▶ 試してみよう

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

3. .container

.container は最も一般的に使用されるコンテナタイプです。各ブレークポイントで予め設定された最大幅を持っています：

ブレークポイント クラスサフィックス 画面幅 >= .container の幅
xs（縦向きスマートフォン） なし 0 100%（固定値なし）
sm（横向きスマートフォン） -sm 576px 540px
md（タブレット） -md 768px 720px
lg（デスクトップ） -lg 992px 960px
xl（大画面） -xl 1200px 1140px
xxl（特大画面） -xxl 1400px 1320px

▶ サンプル .container の幅のデモンストレーション

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-box { background: #f8f9fa; border: 2px solid #0d6efd; padding: 1rem; text-align: center; }
  </style>
</head>
<body>
  <div class="container demo-box">
    This is a .container<br>
    Resize the browser to see its width change at each breakpoint.
  </div>
</body>
</html>
▶ 試してみよう

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

4. .container-fluid

.container-fluid は常に 100% の幅を維持し、左右のパディングのみを保持します（デフォルトでは padding: 0 12px）：

HTML 
<div class="container-fluid bg-dark text-white py-3">
  フル幅バナー - 端から端まで広がります
</div>
▶ 試してみよう

出力: Bootstrap 5.3 でスタイリングされたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。デフォルトでは、ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。 注意: container-fluid はビューポートの端にピッタリではありません。左右に約24pxの padding があります（各辺12px）。端から端までの真のフル幅が必要な場合は、.p-0 やカスタムスタイルと組み合わせてください。

5. .container-{breakpoint}

.container-{breakpoint} はBootstrap 5で追加された機能です。指定されたブレークポイント 以下では 100%幅として動作し、 以上では 固定幅に切り替わります。

▶ サンプル レスポンシブブレークポイントコンテナの比較

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Breakpoint Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-box { border: 2px solid #198754; padding: 1rem; margin-top: 1rem; text-align: center; }
  </style>
</head>
<body>
  <div class="container-md demo-box">
    .container-md - モバイルではフル幅、タブレット以上で固定
  </div>
  <div class="container-lg demo-box" style="border-color: #dc3545;">
    .container-lg - タブレットではフル幅、デスクトップ以上で固定
  </div>
</body>
</html>
▶ 試してみよう

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

6. コンテナのネスト

コンテナをネストできますが、ネストされたコンテナは親の padding を継承し、コンテンツエリアが狭くなることに注意してください：

HTML 
<div class="container" style="border: 2px solid #0d6efd; padding: 1rem;">
  <p>外側のコンテナ（青）</p>
  <div class="container" style="border: 2px solid #198754; padding: 1rem;">
    <p>ネストされたコンテナ（緑） - 各辺約24pxずつ狭くなります</p>
  </div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3 でスタイリングされたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。デフォルトでは、ページはBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。 推奨: ほとんどのシナリオでコンテナをネストする必要はありません。コンテナ内にカラムを作成する必要がある場合は、別のコンテナをネストする代わりに、.row + .col-* を使用してください（次のレッスンで説明します）。

7. コンテナのパディングメカニズム

コンテナにはデフォルトで padding-left: 12px と padding-right: 12px があります。この間隔はグリッドシステムのガター幅と一致し、コンテナ内のカラム内のコンテンツの整列を保証します：

100% 
graph LR
    A[ブラウザ端] -->|12pxパディング| B[コンテナコンテンツ]
    B -->|12pxパディング| C[ブラウザ端]
    style A fill:#eee,stroke:#999
    style C fill:#eee,stroke:#999
    style B fill:#0d6efd,color:#fff

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

コンテナプロパティ 値 説明
padding-left 12px 左パディング
padding-right 12px 右パディング
margin-left auto 水平中央揃え
margin-right auto 水平中央揃え

(1) パディングとマージンの比較

プロパティ クラス例 効果 適用シナリオ
パディング px-3 コンテナコンテンツを中央にインデント コンテンツが端に触れるのを防ぐ
マージン mx-auto 親要素内でコンテナを中央揃え コンテナを水平方向に中央揃え
組み合わせ px-3 mx-auto コンテナが中央揃えされ、コンテンツが端に触れない 標準コンテンツエリア

8. コンテナの組み合わせ例

▶ サンプル フル幅Navbar + 中央揃えコンテンツエリア

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container 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-fluid bg-dark text-white py-3">
    <div class="container">
      <span class="fs-4">Brand</span>
    </div>
  </div>
  <div class="container my-4">
    <div class="row">
      <div class="col-8 bg-light p-3 border">メインコンテンツ</div>
      <div class="col-4 bg-secondary text-white p-3">サイドバー</div>
    </div>
  </div>
  <div class="container-fluid bg-dark text-white py-3 mt-4">
    <div class="container text-center">&copy; 2026 フッター</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 Containers</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .outer { background: #e9ecef; padding: 1rem; }
    .inner { background: #0d6efd; color: #fff; padding: 1rem; }
  </style>
</head>
<body>
  <div class="container outer">
    <h6>外側の .container (青いボーダーのエリア)</h6>
    <div class="container-md inner">
      .container-md — .container の内側<br>
      モバイルではフル幅、md以上で固定
    </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>Debug Containers</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .dbg { outline: 2px dashed #dc3545; padding: 0.5rem; margin: 1rem 0; }
  </style>
</head>
<body>
  <div class="container dbg">.container</div>
  <div class="container-sm dbg">.container-sm</div>
  <div class="container-md dbg">.container-md</div>
  <div class="container-lg dbg">.container-lg</div>
  <div class="container-xl dbg">.container-xl</div>
  <div class="container-xxl dbg">.container-xxl</div>
  <div class="container-fluid dbg">.container-fluid</div>
</body>
</html>
▶ 試してみよう

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

❓ よくある質問

Q コンテナの固定幅はハードコードされていますか？変更できますか？
A はい、Sass変数 $container-max-widths を使用して、各ブレークポイントの最大幅の値を変更できます。Sassのカスタマイズは第5段階で詳しく説明します。
Q .container と .container-fluid を一緒に使えますか？
A はい。一般的な方法は、フル幅のナビバー/バナーに container-fluid を使用し、中央揃えのコンテンツエリアに container を使用することです。これらは競合しません。
Q なぜコンテナには垂直パディングがないのですか？
A コンテナは水平方向の中央揃えと幅の制限のみを制御します。垂直方向の間隔はユーティリティクラス（py-3、my-5など）や子要素のマージンによって制御されます。これらは後のレッスンで説明します。
Q デスクトップで container-md は container と同じ幅ですか？
A mdブレークポイント以上では、container-md は container と全く同じ幅を持ちます。違いはmd未満にあります。container はまだ固定幅の値を持ちますが（ビューポートによって制限されます）、container-md は100%幅になります。lg、xl、xxlについても同様です。
Q コンテナの中にコンテナをネストできますか？注意すべき点は？
A はい、ネストは可能ですが、各コンテナ層が左右24pxのパディングを追加し、内側のコンテナの実際のコンテンツエリアが狭くなります。累積的なパディングを避けるには、内側のコンテナに px-0 を追加してパディングを削除できます。

📖 まとめ

📝 練習問題

  1. ⭐ container、container-fluid、container-md コンテナを横に並べて表示し、色分けされたボーダーで区別するページを作成してください。
  2. ⭐⭐ ブラウザの開発者ツールを開き、ビューポートをそれぞれ540px、720px、960px、1140pxにリサイズして、.container の幅の変化が予め設定された値と一致するか観察してください。
  3. ⭐⭐⭐ 以下のページを作成してください：上部に .container-fluid の暗いナビバー、中部に .container のコンテンツエリア、下部に .container-fluid のフッター。

前回のレッスン: Bootstrapの紹介とインストール · 次のレッスン: タイポグラフィ

Web-Tutorial.com

Web-Tutorial 技術チーム

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

100%