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

生徒

「Bootstrapでウェブサイトを作るとき、一番最初に書くべきことは何ですか？」

先生

「まずは『コンテナ』を配置することから始まります。コンテナは、文字や画像を整理して入れるための『大きな箱』のような役割を果たします。」

生徒

「箱ですか？種類がいくつかあるみたいで、どれを使えばいいか迷っています。」

先生

「それぞれの特徴を理解すれば、思い通りのデザインが作れるようになりますよ。代表的な3つのコンテナの違いを詳しく見ていきましょう！」

1. コンテナとは？ウェブデザインの土台を知ろう

Bootstrap（ブートストラップ）におけるコンテナとは、ウェブサイトのコンテンツを囲む「外枠」のことです。プログラミングやパソコンに詳しくない方に例えると、引っ越し作業で使う「段ボール箱」のようなものです。中身（テキスト、画像、ボタンなど）をバラバラに置くのではなく、この箱の中に入れることで、画面の真ん中にきれいに並べたり、左右に適切な余白を作ったりすることができます。

ウェブサイトを見ているとき、左右に少しスペースがあって、コンテンツが中央にまとまっているのを見たことがありませんか？それがコンテナの役割です。この土台をしっかり作ることで、パソコン、タブレット、スマートフォンといった、画面の大きさが違う端末でも崩れない「レスポンシブデザイン」が実現できます。レスポンシブとは、画面サイズに合わせて自動で見やすく調整される仕組みのことです。

2. 固定幅の定番！.containerクラスの使い方

最も基本的でよく使われるのが .container というクラスです。このクラスの特徴は、画面の横幅に合わせて「段階的に」幅が変わることです。例えば、大きなパソコン画面では中央にまとまり、スマホ画面では画面いっぱいに広がりますが、常に左右に程よい余白（パディング）を保ってくれます。

デザインの現場では、「コンテンツをバラつかせたくない」「中央に寄せて読みやすくしたい」という時にこの固定幅コンテナが選ばれます。左右の余白はBootstrapが自動で計算してくれるので、自分で難しい設定をする必要はありません。まずはこのクラスから使ってみるのが、脱・初心者への近道です。


<div class="container bg-primary text-white p-3">
    <h3>これは固定幅コンテナ（.container）です</h3>
    <p>画面サイズに応じて、最大幅が段階的に変化します。左右に余白が生まれるのが特徴です。</p>
</div>

ブラウザ表示

3. 画面いっぱいに広がる！.container-fluidクラス

次に紹介するのは .container-fluid（コンテナ・フルイド）です。フルイドとは「流動的な」という意味があります。その名の通り、パソコンでもスマホでも、常に画面の端から端まで（横幅100%）いっぱいに広がるのが特徴です。

背景に大きな画像を表示したい場合や、地図を画面いっぱいに見せたいサイトなどで重宝します。左右に大きな余白を作りたくない、ダイナミックなレイアウトにしたい時にこのクラスを使いましょう。画面の横幅をすべて活用するため、迫力のあるデザインになります。


<div class="container-fluid bg-success text-white p-3">
    <h3>これは全幅コンテナ（.container-fluid）です</h3>
    <p>どんな画面サイズでも、常に横幅いっぱい（100%）に広がります。</p>
</div>

ブラウザ表示

4. 特定の幅まで広げる！ブレークポイント付きコンテナ

少し応用的なのが .container-{breakpoint} です。ここで言う「ブレークポイント」とは、画面サイズを切り分ける「境界線」のことです。例えば、.container-md と書くと、「タブレットサイズ（中サイズ）より小さい時は画面いっぱいに広がり、それ以上の大きさでは固定幅になる」という設定になります。

これは、「スマホの時は余白なしで大きく見せたいけれど、パソコンで見るときは中央にまとめたい」というワガママな要望を叶えるためのものです。Bootstrapには、sm（小）、md（中）、lg（大）、xl（特大）、xxl（超特大）というサイズ設定が用意されています。これらを使い分けることで、より高度なレスポンシブデザインが作れるようになります。


<div class="container-md bg-warning text-dark p-3">
    <h3>これは中サイズ（md）まで広がるコンテナです</h3>
    <p>スマホや小さなタブレットでは横幅いっぱいになり、ある程度画面が大きくなると固定幅に切り替わります。</p>
</div>

ブラウザ表示

5. コンテナを中央に配置する仕組み

Bootstrapのコンテナがなぜ自動で真ん中に来るのか、その仕組みについても触れておきましょう。コンテナには margin-left: auto; と margin-right: auto; というCSSの設定が組み込まれています。これは左右の余白を同じ分だけ自動で分配するという意味です。

左右の余白が同じになることで、中身がピタッと真ん中に収まります。これを自分でゼロから書こうとすると計算が大変ですが、Bootstrapなら class="container" と一行書くだけで解決します。初心者にとって、このような難しい計算を代わりにやってくれるのがフレームワーク（Bootstrapのような道具）を使う最大のメリットです。

6. コンテナの中に画像を入れてみよう

実際にコンテナの中に画像を入れると、どのように表示されるか見てみましょう。コンテナは箱なので、中に入れた画像もその幅に制限されます。もしコンテナの外に画像を置いてしまうと、画像が画面を突き抜けてしまったり、レイアウトが崩れたりする原因になります。

画像を表示する際は .img-fluid というクラスも併用すると良いでしょう。これにより、画像がコンテナの幅よりも大きくならず、スマホで見てもはみ出さない「親切な画像」になります。このようにコンテナと他のパーツを組み合わせてサイトを形にしていきます。


<div class="container border p-3">
    <p>コンテナの中に画像を配置した例です：</p>
    <img src="/img/sample150-100.jpg" class="img-fluid rounded" alt="サンプル画像">
</div>

ブラウザ表示

7. コンテナのパディング（内側の余白）について

Bootstrapのコンテナには、最初から少しだけ「内側の余白（パディング）」が設定されています。これにより、文字が画面の端っこにピッタリくっついて読みづらくなるのを防いでいます。パソコン初心者がよくやってしまうミスに「文字が端に寄りすぎて見栄えが悪い」というものがありますが、コンテナを使えば自動で「プロっぽい余白」が手に入ります。

もし、もっと広い余白を作りたい場合は、p-3 や p-5 といったスペーシングユーティリティ（余白を調整する専用の合言葉）を追加することで、さらに調整が可能です。デザインの美しさは、実はこの「余白」の取り方で決まると言っても過言ではありません。