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

レスポンシブデザイン（スマホでもPCでも、どんな大きさの端末で見てもちょうどいい大きさに表示されるWebデザインのこと）を作るためには、 min-widthとmax-widthを避けては通れません。これは、それぞれwidthの最小値と最大値を決める便利なものです。といってもなかなか分かりづらいと思うので、ゼロから解説していきます。引用サイト：http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html

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

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

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

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

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

このウェブページを幅320pxのスマホで見たとき場合を考えてみましょう。すると、幅500pxの画像は、画面からはみ出てしまいます

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

実際に使ってみよう

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

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

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

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

↑縦横比を保った状態で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以上大きくならないように』という指定になります。とはいえ、ほとんど使う機会はありません（僕自身使ったことがありません）。「そういう指定もあるんだ」程度に頭に入れておけば良いでしょう。

4. まとめ

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

min-widthにより「要素をこれ以上小さくしない」という幅の制限をかけられる
max-widthにより「要素をこれ以上大きくしない」という幅の制限をかけられる
どちらもwidthの%指定と合わせて使うと便利！
50%で基本表示させたいけど、◯◯px以上にはしたくない！など
max-width:100%により画面サイズから画像がはみ出ないように設定できる
縦横比が崩れてしまったときはheight: autoを指定