【HTML＋CSS初心者講座04】min-width・max-width でレスポンシブ対応 する方法

レスポンシブデザイン（スマホでもPCでも、どんな端末で見てもちょうど良いサイズで表示されるWebデザイン）を作るには、min-width と max-width が欠かせません。それぞれ width の最小値と最大値を設定できる、とても便利なプロパティです。ゼロからわかりやすく解説していきます。

1. 最小幅（min-width）の使い方

min-width では、width の取ることができる最小値を指定します。つまり「要素がこれ以上小さくならない幅」を設定できます。

p
{ min-width: 100px; }
→ 要素が 100px より小さくならない（100px 以上）という意味

1-1. min-width の使いどころ

width を % で指定したとき、min-width はセットで使うと便利です。

たとえば width: 50% を指定した場合、見る端末（ブラウザ）のサイズによって要素が小さすぎたり大きすぎたりします。

端末 width: 50% のとき
PC（幅 1200px） 600px → ちょうど良い
スマホ（幅 320px） 160px → 小さすぎる！

min-width を使えば「どんな端末・ブラウザで見ても、これよりは幅が小さくならない」という制限が設けられます。

1-2. 実際に使ってみよう

width: 50% と min-width: 100px をセットで使い、
「親要素の幅が小さくなっても、要素の幅が 100px より小さくならない」ようにしてみます。

HTMLコード
<p>↓親要素 大きめ（200px）</p>
<div class="test1">
  <p class="nomin">最小幅なし</p>
  <p class="min">最小幅100px</p>
</div>

<p>↓親要素 小さめ（100px）</p>
<div class="test2">
  <p class="nomin">最小幅なし</p>
  <p class="min">最小幅100px</p>
</div>

CSSコード
.test1 { width: 200px; background: skyblue; }
.test2 { width: 100px; background: skyblue; }

.nomin {
  background: gray;
  width: 50%;
  /* 最小幅なし */
}
.min {
  background: orange;
  width: 50%;
  min-width: 100px; /* 最小幅あり */
}

表示結果

↓ 親要素 大きめ（200px）

最小幅なし
= 100px

最小幅100px
= 100px

↓ 親要素 小さめ（100px）

最小幅なし
= 50px

最小幅100px
= 100px（制限）

✅ 親要素が小さくなっても、min-width: 100px を設定した要素（オレンジ）は 100px 以下になりません。

2. 最大幅（max-width）の使い方

max-width では、width の取ることができる最大値を指定します。つまり「要素がこれ以上大きくならない幅」を設定できます。

p
{ max-width: 200px; }
→ 要素が 200px より大きくならない（200px 以下）という意味

2-1. max-width の使いどころ①：PCで広がりすぎるのを防ぐ

width: 80% の場合を考えてみましょう。

端末 width: 80% のとき
スマホ（幅 320px） 256px → ちょうど良い
PC（幅 1400px） 1120px → 大きすぎる！

max-width を設定すれば「画面が大きい PC で見ても、これ以上は幅が大きくならない」という制限が設けられます。

2-2. 実際に使ってみよう

width: 80% と max-width: 100px をセットで使い、
「親要素の幅が大きくなっても、要素の幅は 100px より大きくならない」ようにしてみます。

HTMLコード
<p>↓親要素 小さめ（100px）</p>
<div class="test1">
  <p class="nomax">最大幅なし</p>
  <p class="max">最大幅100px</p>
</div>

<p>↓親要素 大きめ（200px）</p>
<div class="test2">
  <p class="nomax">最大幅なし</p>
  <p class="max">最大幅100px</p>
</div>

CSSコード
.test1 { width: 100px; background: skyblue; }
.test2 { width: 200px; background: skyblue; }

.nomax {
  background: gray;
  width: 80%;
  /* 最大幅なし */
}
.max {
  background: orange;
  width: 80%;
  max-width: 100px; /* 最大幅あり */
}

表示結果

↓ 親要素 小さめ（100px）

最大幅なし
= 80px

最大幅100px
= 80px

↓ 親要素 大きめ（200px）

最大幅なし
= 160px

最大幅100px
= 100px（制限）

✅ 親要素が大きくなっても、max-width: 100px を設定した要素（オレンジ）は 100px を超えません。

2-3. 使いどころ②：画像が画面からはみ出ないようにする

max-width のもう1つの重要な使い方が、画像の「はみ出し」防止です。

たとえば幅 500px の画像を載せたとき、幅 320px のスマホで見ると画像が画面からはみ出てしまいます。

💡 max-width: 100% を画像に設定すれば、大きな画面では元のサイズで表示しつつ、小さな画面では画面サイズに収まるよう自動で縮小されます。

CSSコード
img {
  width: 100px;
  height: 100px;  /* ← 縦横比が崩れる原因 */
  max-width: 100%;
}

縦横比が崩れた例（NG）
幅50px
高さ100px
（縦長になる）

CSSコード（縦横比を保つ）
img {
  width: 100px;
  max-width: 100%;
  height: auto;  /* ← 縦横比を保つ！ */
}

縦横比を保った例（OK）
幅50px
高さ50px
（比率を保つ）

⚠️ max-width: 100% と一緒に height を固定値（px）で指定すると縦横比が崩れます。
height: auto を必ずセットで指定しましょう。

よく使う組み合わせパターン

目的 CSSの書き方
コンテンツ幅を画面いっぱいにしつつ最大幅を制限 width: 100%; max-width: 960px;
%指定しつつ最小幅を保証 width: 50%; min-width: 200px;
画像のはみ出し防止（縦横比を保つ） max-width: 100%; height: auto;

3. 最小高と最大高（min-height / max-height）

幅と同様に、高さにも最小値・最大値を設定するプロパティがあります。考え方は min-width / max-width とまったく同じです。

プロパティ 意味 例
min-height 高さの最小値を指定する
（これより小さくならない）		 min-height: 200px;
→ 200px 以下にならない
max-height 高さの最大値を指定する
（これより大きくならない）		 max-height: 500px;
→ 500px 以上にならない
書き方の例
.box {
  min-height: 200px; /* 最低でも200pxの高さを確保 */
  max-height: 500px; /* 500pxより高くならない */
}

💡 min-height はカードやボックスの高さを揃えたいときに便利です。max-height は内容が増えすぎてレイアウトが崩れるのを防ぐときに使います。min-width ほど使う機会は多くありませんが、知っておくと役立ちます。

まとめ：4つのプロパティ一覧

プロパティ 対象 意味
min-width 横幅 ◯◯px より小さくしない
max-width 横幅 ◯◯px より大きくしない
min-height 高さ ◯◯px より小さくしない
max-height 高さ ◯◯px より大きくしない

📝 まとめ

  • min-width：「要素をこれ以上小さくしない」幅の制限をかけられる
  • max-width：「要素をこれ以上大きくしない」幅の制限をかけられる
  • どちらも width の % 指定とセットで使うのが基本スタイル
  • max-width: 100% により、画面サイズから画像がはみ出ないように設定できる
  • 縦横比が崩れてしまったときは height: auto を追加する
  • 同じ考え方で高さにも min-height / max-height が使える

次のステップ

次は margin と padding で余白を自在にコントロールする方法を学びましょう。