【CSS】max-widthとmin-widthの使い方まとめ

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

min-widthでは「widthの取ることのできる最小値」を指定します。言い換えると要素がこれ以上小さくならない幅を指定することができます。 たとえば、以下のように書くと「段落要素（pタグ）が100pxよりも小さくならない」という指定になります。

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

ではmin-widthは具体的にどのようなときに使うのでしょうか。

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

widthを%で指定したときに、min-widthはセットで使うと便利です。たとえばwidth:50%のとき、ウェブページを見る端末（ブラウザ）のサイズによって要素が小さくすぎたり、大きすぎたりするわけです。

「PCでみる分にはwidth:50%はちょうどいい大きさだけど、スマホでは小さすぎる」ということがレスポンシブ対応のウェブサイトを作っているとよく起こります。

そんなときにmin-widthを使えば「どんな端末・ブラウザで見てもこれよりは幅が小さくならない」という設定ができるわけですね。

実際に使ってみよう

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

<p>↓親要素大きめの場合</p>
<div class="test1">
  <p class="nomin">最小幅なし</p>
  <p class="min">最小幅100px</p>
</div>

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

.test1 {
  /*親要素大きめ*/
  width: 200px;
  background:skyblue;
}
.test2 {
  /*親要素小さめ*/
  width: 100px;
  background:skyblue
}
.nomin {
  background:gray;
  width: 50%;
  /*最小幅なし*/
}
.min {
  background:orange;
  width: 50%;
  /*最小幅あり*/
  min-width: 100px;
}

このようにmin-widthを使うことで、それぞれの要素に対して「これよりは小さくならない」という制限を儲けられるわけですね。

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

今度はmax-widthの方を見てみましょう。考え方は最小幅と基本的に同じですが、使いどころが少し異なります。max-widthでは「widthの取ることのできる最大値」を指定します。つまり、要素がこれ以上は大きくならない幅を指定することができます。 たとえば、以下のように書くと「段落要素（pタグ）が200pxよりも大きくならない」という指定になります。

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

2-1. max-widthの使いどころ1

どんなときにmax-widthを使うと便利なのでしょうか。

たとえば要素がwidth:80%のとき「スマホで見るとちょうど良い大きさなのに、PCで見るとでかすぎる！」なんてことがよくあります。

そんなときmax-width（最大幅）が決まっていれば「画面の大きいPCで見ても、これ以上は幅が大きくならない！」という設定ができるわけですね。

実際に使ってみよう

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

<p>↓親要素小さめの場合</p>
<div class="test1">
  <p class="nomin">最大幅なし</p>
  <p class="min">最大幅100px</p>
</div>

<p>↓親要素大きめの場合</p>
<div class="test2">
  <p class="nomin">最大幅なし</p>
  <p class="min">最大幅100px</p>
</div>

.test1 {
  /*親要素小さめ*/
  width: 100px;
  background:skyblue;
}
.test2 {
  /*親要素大きめ*/
  width: 200px;
  background:skyblue;
}
.nomin {
  /*最大幅なし*/
  background:gray;
  width: 80%;
}
.min {
  /*最大幅あり*/
  background:orange;
  width: 80%;
  max-width: 100px;
}

2-2. 使いどころ2：画像がはみ出ないように制限する

max-widthのもう１つの使いどころは、画面（親要素）から画像がはみ出ないように制限したいときです。たとえば、ウェブページに幅500pxの画像をのせるとします。

「でかい画面でページを見る分には500pxで画像を表示させたいものの、500pxより小さい画面で見たときにははみ出てほしくない」と思いますよね。そんなときには、画像に対してmax-width: 100%を設定しておきます。すると、大きい画面で見たときには画像は500pxとなり、小さい画面で見たときにも画面サイズより画像が大きく表示させることがなくなります（つまり、はみ出ることがなくなります）。

実際に使ってみよう

例を紹介します。画像のwidthは100pxです。これを画面200pxで見た場合と、50pxで見た場合を試してみます。

<p>
　　<img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）" />
</p>

img {
  width: 100px;
  height: 100px;
  max-width: 100%;
}

50pxの画面で見ても、画像ははみ出ずに画面サイズぴったりの大きさになりました。とはいえ、幅だけmax-widthにより小さくなったせいで、縦長になってしまいました。このように縦横比がおかしくなってしまったときは、以下の方法を取りましょう。

2-3. 画像の縦横比を保つ方法

max-width使用時に縦横比が崩れてしまった場合は、CSSに以下の指定を追加します。 height: auto; これで縦横比を保ったまま画像が縮小されるようになります。この指定を加えて50px画面でもう一度表示させてみましょう。

<p>
  <img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）" />
</p>

img {
  width: 100px;
  max-width: 100%;
  height: auto;
}

↑縦横比を保った状態で50pxに収まりました。このようにmax-widthを使うことで、要素に対して「これ以上は大きくならない」という制限を儲けられるわけですね。

3. min-heightとmax-height

ちなみ最小高と最大高を決める「min-height」と「max-height」なんていうものもあります。考え方は幅についてのmin-width、max-widthと同じです。min-height: 500pxと書けば『要素のheightが500pxより小さくならないように』という指定になります。max-height: 500pxと書けば『要素のheightが500px以上大きくならないように』という指定になります。とはいえ、min-widthと比べるとあまり使う機会は多くないかと思います。

4. まとめ

最後に、ここまでの記事の内容をまとめておきます。