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

生徒

「Bootstrapで画面いっぱいに広がるレイアウトを作りたいんですが、どうすればいいですか？」

先生

「Bootstrapには、サイズや幅・高さを簡単に調整できる便利なクラスがあります。」

生徒

「CSSとか難しそうで不安です…パソコンも最近触り始めたばかりで。」

先生

「大丈夫です。今日は画面の最小サイズや最大サイズを決める方法を、例え話を使って説明します。」

1. Bootstrapのサイズ・幅高さユーティリティとは

Bootstrapとは、Webサイトを作るときに使える便利な部品セットのようなものです。文字の大きさや色、配置だけでなく、要素の幅や高さも簡単に指定できます。

サイズ・幅高さユーティリティとは、「この箱は最低でもこの大きさにする」「画面いっぱいまで広げる」といった指定を、短いクラス名で行える仕組みです。パソコン操作に慣れていない方でも、呪文のようなクラス名をそのまま書くだけで使えます。

2. vhとvwの意味を超かんたんに理解しよう

min-vh-100 や min-vw-100 を理解するために、まず vh と vw を知りましょう。

vh は「画面の高さ」、vw は「画面の横幅」を基準にした単位です。たとえば、スマホやパソコンの画面を一枚の紙だと考えてください。その紙の高さ全部が100vh、横幅全部が100vwです。

つまり、100 と書いてあれば「画面いっぱい」という意味になります。

min-vh-100 は「最低限、画面の高さ100％にする」という指定です。中身が少なくても、背景を画面いっぱいに広げたいときに使います。


<div class="min-vh-100 bg-light">
    <p>このエリアは画面の高さまで広がります</p>
</div>

ブラウザ表示

これは、空の段ボールでも床から天井までの高さを必ず確保するようなイメージです。

min-vw-100 は、横幅を最低でも画面いっぱいに広げるクラスです。左右に余白を作りたくない背景エリアで活躍します。


<div class="min-vw-100 bg-secondary text-white">
    横幅が画面いっぱいになります
</div>

ブラウザ表示

カーテンを横に全部引き切るような感覚で覚えると分かりやすいです。

mw-100 は「これ以上大きくならない最大の横幅」を指定します。画像や箱が画面からはみ出すのを防ぐ役割があります。


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

ブラウザ表示

これは、写真を額縁に入れて、枠からはみ出さないようにするイメージです。

mh-100 は、高さが大きくなりすぎないように制限するクラスです。縦に長くなりすぎる要素をコントロールできます。


<div class="mh-100 overflow-auto border">
    <p>内容が多くても高さは制限されます</p>
</div>

ブラウザ表示

水筒に水を入れすぎても、決まった高さ以上にはならないような感覚です。

min が付くクラスは「最低ライン」、m が付くクラスは「上限」を決めます。最低限これくらいは必要、これ以上は大きくしない、という使い分けです。

Bootstrap5では、こうした指定をCSSを書かずに行えるため、初心者でも安心してレイアウト調整ができます。

画面いっぱいにならない場合は、親要素やブラウザのサイズが関係していることがあります。また、vhやvwは画面基準なので、スクロールバーの有無で見え方が変わることもあります。

まずは「画面＝基準」「100＝全部」と覚えるだけで十分です。