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

min-widthとmax-widthの使い方

レスポンシブデザイン(スマホでもPCでも、どんな大きさの端末で見てもちょうどいい大きさに表示されるWebデザインのこと)を作るためには、min-widthmax-widthを避けては通れません。これは、それぞれ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%のとき、ウェブページを見る端末(ブラウザ)のサイズによって要素が小さくすぎたり、大きすぎたりするわけです。

同じ幅50 でも見る端末によって小さすぎることあり

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

min-widthの使いどころ

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

実際に使ってみよう

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

HTMLコード
<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>
CSSコード
.test1 {width: 200px;/*親要素大きめ*/
	background:skyblue
	}
.test2 {width: 100px;/*親要素小さめ*/
	background:skyblue
	}
.nomin {/*最小幅なし*/
	background:gray;
	width: 50%
	}
.min {/*最小幅あり*/
	background:orange;
	width: 50%;
	min-width: 100px
	}
ブラウザ表示


↓親要素大きめの場合

最小幅なし

最小幅100px


↓親要素小さめの場合

最小幅なし

最小幅100px


↑水色が親要素です。親要素が小さくなっても最小幅が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の指定

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

実際に使ってみよう

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

HTMLコード
<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>
CSSコード
.test1 {width: 100px;/*親要素小さめ*/
	background:skyblue
	}
.test2 {width: 200px;/*親要素大きめ*/
	background:skyblue
	}
.nomin {/*最大幅なし*/
	background:gray;
	width: 80%
	}
.min {/*最大幅あり*/
	background:orange;
	width: 80%;
	max-width: 100px
	}
ブラウザ表示


↓親要素小さめの場合

最大幅なし

最大幅100px


↓親要素大きめの場合

最大幅なし

最大幅100px


↑水色が親要素です。親要素が大きくなっても最大幅が100pxに設定されていると100px以上の大きさになりません。

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

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

iphone画像

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

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

実際に使ってみよう

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

HTMLコード
<p><img src="http://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔(通常)" /></p>
CSSコード
img {width: 100px;
	height: 100px;
	max-width: 100%}
ブラウザ表示

↓200pxの画面で見た場合=幅100px(widthの値)で表示

サルワカくんの顔(通常)


↓50pxの画面で見た場合=幅50pxで表示

サルワカくんの顔(通常)

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

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

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

HTMLコード
<p><img src="http://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔(通常)" /></p>
CSSコード
img {width: 100px;
	max-width: 100%;
	height: auto;
}
ブラウザ表示

↓50pxの画面で見た場合=幅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を指定
サルワカ