Bootstrap5 最小・最大サイズの使い方完全ガイド｜min-vh-100・min-vw-100・mw-100・mh-100を初心者向けに解説
生徒
「Bootstrapで画面いっぱいに広がるレイアウトを作りたいんですが、どうすればいいですか？」
先生
「Bootstrapには、サイズや幅・高さを簡単に調整できる便利なクラスがあります。」
生徒
「CSSとか難しそうで不安です…パソコンも最近触り始めたばかりで。」
先生
「大丈夫です。今日は画面の最小サイズや最大サイズを決める方法を、例え話を使って説明します。」
1. Bootstrapのサイズ・幅高さユーティリティとは
Bootstrapとは、Webサイトを作るときに使える便利な部品セットのようなものです。文字の大きさや色、配置だけでなく、要素の幅や高さも簡単に指定できます。
サイズ・幅高さユーティリティとは、「この箱は最低でもこの大きさにする」「画面いっぱいまで広げる」といった指定を、短いクラス名で行える仕組みです。パソコン操作に慣れていない方でも、呪文のようなクラス名をそのまま書くだけで使えます。
2. vhとvwの意味を超かんたんに理解しよう
min-vh-100 や min-vw-100 を理解するために、まず vh と vw を知りましょう。
vh は「画面の高さ」、vw は「画面の横幅」を基準にした単位です。たとえば、スマホやパソコンの画面を一枚の紙だと考えてください。その紙の高さ全部が100vh、横幅全部が100vwです。
つまり、100 と書いてあれば「画面いっぱい」という意味になります。
3. min-vh-100の使い方｜最低でも画面いっぱいの高さ
min-vh-100 は「最低限、画面の高さ100％にする」という指定です。中身が少なくても、背景を画面いっぱいに広げたいときに使います。
<div class="min-vh-100 bg-light">
<p>このエリアは画面の高さまで広がります</p>
</div>
これは、空の段ボールでも床から天井までの高さを必ず確保するようなイメージです。
4. min-vw-100の使い方｜横幅を画面いっぱいにする
min-vw-100 は、横幅を最低でも画面いっぱいに広げるクラスです。左右に余白を作りたくない背景エリアで活躍します。
<div class="min-vw-100 bg-secondary text-white">
横幅が画面いっぱいになります
</div>
カーテンを横に全部引き切るような感覚で覚えると分かりやすいです。
5. mw-100の使い方｜最大横幅を制限する
mw-100 は「これ以上大きくならない最大の横幅」を指定します。画像や箱が画面からはみ出すのを防ぐ役割があります。
<img src="/img/sample150-100.jpg" class="mw-100" alt="サンプル画像">
これは、写真を額縁に入れて、枠からはみ出さないようにするイメージです。
6. mh-100の使い方｜最大高さを超えないようにする
mh-100 は、高さが大きくなりすぎないように制限するクラスです。縦に長くなりすぎる要素をコントロールできます。
<div class="mh-100 overflow-auto border">
<p>内容が多くても高さは制限されます</p>
</div>
水筒に水を入れすぎても、決まった高さ以上にはならないような感覚です。
7. 最小サイズと最大サイズの違いを整理しよう
min が付くクラスは「最低ライン」、m が付くクラスは「上限」を決めます。最低限これくらいは必要、これ以上は大きくしない、という使い分けです。
Bootstrap5では、こうした指定をCSSを書かずに行えるため、初心者でも安心してレイアウト調整ができます。
8. 初心者がつまずきやすいポイント
画面いっぱいにならない場合は、親要素やブラウザのサイズが関係していることがあります。また、vhやvwは画面基準なので、スクロールバーの有無で見え方が変わることもあります。
まずは「画面＝基準」「100＝全部」と覚えるだけで十分です。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
