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

生徒

「Bootstrapで.containerとmw-って書いてあるのを見たんですが、何が違うんですか？」

先生

「どちらも横幅を調整するための仕組みですが、使いどころが少し違います。」

生徒

「画面の大きさに合わせるって聞くと、同じに見えてしまいます…」

先生

「では、パソコンやスマホを触ったことがない前提で、たとえ話から説明していきましょう。」

1. Bootstrapのコンテナとは何かを超やさしく説明

Bootstrapのコンテナとは、ページの内容を入れるための「大きな箱」です。パソコン画面いっぱいに文字を書いてしまうと、端から端まで文字を読むことになり、とても疲れます。そこで、あらかじめ「ここまでの横幅で表示しよう」と決めてくれるのがコンテナです。

.containerは、画面サイズに応じて自動的に横幅が変わります。スマホでは狭く、パソコンでは広くなります。この仕組みをレスポンシブデザインと呼びます。レスポンシブとは、画面サイズに反応する、という意味です。


<div class="container">
    <h1>記事のタイトル</h1>
    <p>ここに文章が入ります</p>
</div>

ブラウザ表示

2. max-widthとは？mw-*を理解するための基礎知識

max-widthとは「これ以上は広がらない最大の横幅」という意味です。たとえば、ゴムひもを引っ張っても、ある長さ以上には伸びない状態を想像してください。その限界がmax-widthです。

Bootstrapではmw-100のように、mw-*というクラスが用意されています。これは最大幅をパーセントで指定するためのユーティリティです。ユーティリティとは、すぐに使える便利な設定のことです。


<img src="/img/sample150-100.jpg" class="mw-100" alt="サンプル画像">

ブラウザ表示

.containerは「レイアウト全体の箱」を作るためのものです。一方でmw-*は「個々の要素の最大幅」を制限するために使います。目的がまったく違う点が重要です。

containerはページの土台です。 mw-*は、その中に置く家具のサイズを調整するイメージです。家と家具くらい役割が違います。


<div class="container">
    <img src="/img/sample120-120.jpg" class="mw-50" alt="画像">
</div>

ブラウザ表示

人は一行に文字が多すぎると、どこを読んでいるのか分からなくなります。そのため、ブログや解説サイトでは横幅を制限するのが基本です。 Bootstrapのcontainerは、この読みやすさを考えて作られています。

mw-*を使うと、文章だけ、画像だけ、表だけ、というように細かく調整できます。読みやすさを部分ごとに整えたいときに便利です。

ブログ記事、説明ページ、会社のホームページなど、文章が中心のページではcontainerが基本です。ページ全体が整い、どの画面サイズでも安心して読めます。

特に初心者のうちは、まずcontainerを使うだけで失敗が減ります。難しい設定をしなくても、自動で最適な横幅になるからです。


<div class="container">
    <h2>見出し</h2>
    <p>説明文がここに入ります</p>
</div>

ブラウザ表示

画像が画面いっぱいに広がると困る場合があります。そんなときにmw-*を使うと、画像だけ最大幅を制限できます。レイアウト全体には影響しません。

これは、すでにcontainerの中にある要素にも使えます。部分調整用として覚えておくと便利です。


<div class="container">
    <img src="/img/sample150-100.jpg" class="mw-75" alt="画像">
</div>

ブラウザ表示

containerとmw-*を同じものだと考えると混乱します。まずは「ページ全体はcontainer」「細かい調整はmw-*」と覚えてください。この順番がとても大切です。

Bootstrap5では、考え方が統一されているので、役割を意識すれば自然と理解できます。難しい計算や設定は不要です。

横幅が整うと、文字の行間や視線の流れが安定します。結果として、読んでいて疲れないページになります。これはプロのサイトでも必ず意識されているポイントです。

Bootstrapのcontainerとmw-*は、初心者でもこの設計を簡単に実現できる仕組みです。まずは使ってみて、違いを体感してみましょう。