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

記事内に商品プロモーションが含まれる場合があります

前回の講座

レスポンシブデザイン（スマホでもPCでも、どんな大きさの端末で見てもちょうどいい大きさに表示されるWebデザインのこと）を作るためには、min-widthとmax-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%は画面そのものではなく、包含ブロックの幅を基準にします。以下の通常フローの例では、幅が決まっている親のdivの内容幅が基準です。その幅が端末に合わせて変わると、要素が小さすぎたり、大きすぎたりするわけです。

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

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

実際に使ってみよう

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

HTMLコード

<div class="min-width-example">
  <p class="case-label">↓親要素大きめの場合</p>
  <div class="parent-1">
    <p class="unlimited">最小幅なし</p>
    <p class="limited">最小幅100px</p>
  </div>

  <p class="case-label">↓親要素小さめの場合</p>
  <div class="parent-2">
    <p class="unlimited">最小幅なし</p>
    <p class="limited">最小幅100px</p>
  </div>
</div>

CSSコード

.min-width-example {
  box-sizing: content-box;
  border: 1px solid #e6e6e6;
  font: 14px/1.6 sans-serif;
  color: #333;
}

.min-width-example p {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.min-width-example .case-label {
  margin-top: 1em;
}

.min-width-example .parent-1 {
  width: 200px;
  background: skyblue;
}

.min-width-example .parent-2 {
  width: 100px;
  background: skyblue;
}

.min-width-example .unlimited {
  width: 50%;
  background: gray;
}

.min-width-example .limited {
  width: 50%;
  min-width: 100px;
  background: orange;
}

ブラウザ表示

↓親要素大きめの場合

最小幅なし

最小幅100px

↓親要素小さめの場合

最小幅なし

最小幅100px

↑水色が親要素です。親要素が小さくなっても最小幅が100pxに設定されていると100px未満にはなりません。

このようにmin-widthを使うことで、それぞれの要素に対して「これよりは小さくならない」という制限を設けられるわけですね。ただし、親より大きい最小幅を指定すると親からはみ出す場合があります。通常のブロック要素では、widthをmax-widthで制限した後にmin-widthを満たすように幅が決まり、min-widthがmax-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より大きくならない」ようにしてみます。

HTMLコード

<div class="max-width-example">
  <p class="case-label">↓親要素小さめの場合</p>
  <div class="parent-1">
    <p class="unlimited">最大幅なし</p>
    <p class="limited">最大幅100px</p>
  </div>

  <p class="case-label">↓親要素大きめの場合</p>
  <div class="parent-2">
    <p class="unlimited">最大幅なし</p>
    <p class="limited">最大幅100px</p>
  </div>
</div>

CSSコード

.max-width-example {
  box-sizing: content-box;
  border: 1px solid #e6e6e6;
  font: 14px/1.6 sans-serif;
  color: #333;
}

.max-width-example p {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.max-width-example .case-label {
  margin-top: 1em;
}

.max-width-example .parent-1 {
  width: 100px;
  background: skyblue;
}

.max-width-example .parent-2 {
  width: 200px;
  background: skyblue;
}

.max-width-example .unlimited {
  width: 80%;
  background: gray;
}

.max-width-example .limited {
  width: 80%;
  max-width: 100px;
  background: orange;
}

ブラウザ表示

↓親要素小さめの場合

最大幅なし

最大幅100px

↓親要素大きめの場合

最大幅なし

最大幅100px

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

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

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

このウェブページを幅320pxのスマホで見た場合を考えてみましょう。画像を置く親要素の幅が500px未満なら、幅500pxの画像は、画面からはみ出てしまいます。

「大きい画面では500pxで画像を表示させたいものの、親要素が500pxより小さくなったときにははみ出てほしくない」と思いますよね。そんなときには、width: 500pxと合わせて画像にmax-width: 100%を設定します。以下の通常フローの例では、親の内容幅が500px以上なら画像は500px、500px未満ならその内容幅以内に縮みます。枠や余白を加える場合はbox-sizingも確認し、親より大きいmin-widthを併用しないようにしましょう。

実際に使ってみよう

例を紹介します。画像のwidthは100pxです。これを幅200pxの親要素と、50pxの親要素に入れた場合を試してみます。高さは100pxに固定し、幅だけが縮むとどうなるかを比較します。

HTMLコード

<div class="image-width-example">
  <p class="case-label"><span class="case-title">↓200pxの親要素で見た場合</span><span class="case-detail">=幅100px(widthの値)で表示</span></p>
  <p class="parent-200"><img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）" width="120" height="119" /></p>

  <p class="case-label"><span class="case-title">↓50pxの親要素で見た場合</span><span class="case-detail">=幅50pxで表示</span></p>
  <p class="parent-50"><img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）" width="120" height="119" /></p>
</div>

CSSコード

.image-width-example {
  font: 14px/1.6 sans-serif;
  color: #333;
}

.image-width-example p {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.image-width-example .case-label {
  margin-top: 1em;
}

.image-width-example .case-title {
  font-weight: 700;
}

.image-width-example .case-detail {
  display: block;
}

.image-width-example .parent-200 {
  width: 200px;
  border: 2px solid silver;
}

.image-width-example .parent-50 {
  width: 50px;
  border: 2px solid silver;
}

.image-width-example img {
  display: block;
  box-sizing: content-box;
  width: 100px;
  max-width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: fill;
}

ブラウザ表示

↓200pxの親要素で見た場合=幅100px(widthの値)で表示

サルワカくんの顔（通常）

↓50pxの親要素で見た場合=幅50pxで表示

サルワカくんの顔（通常）

50pxの親要素に入れても、画像の幅は50pxに収まりました。とはいえ、height: 100pxを固定したまま幅だけmax-widthにより小さくなったため、縦長になってしまいました。このように縦横比がおかしくなってしまったときは、以下の方法を取りましょう。

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

画像の高さを固定して縦横比が崩れてしまった場合は、CSSの高さを以下の指定に置き換えます。height: auto;この画像では、元画像の縦横比を保ったまま高さも縮みます。この指定に変えて、幅50pxの親要素でもう一度表示させてみましょう。

HTMLコード

<div class="image-width-example">
  <p class="case-label"><span class="case-title">↓50pxの親要素で見た場合</span><span class="case-detail">=幅50pxで表示</span></p>
  <p class="parent-50"><img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）" width="120" height="119" /></p>
</div>

CSSコード

.image-width-example {
  font: 14px/1.6 sans-serif;
  color: #333;
}

.image-width-example p {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.image-width-example .case-label {
  margin-top: 1em;
}

.image-width-example .case-title {
  font-weight: 700;
}

.image-width-example .case-detail {
  display: block;
}

.image-width-example .parent-50 {
  width: 50px;
  border: 2px solid silver;
}

.image-width-example img {
  display: block;
  box-sizing: content-box;
  width: 100px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: fill;
}

ブラウザ表示

↓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を超えないように』という指定になります。高さを制限しても内容が自動で収まるわけではなく、はみ出す内容の扱いはoverflowで決めます。%指定の高さは、包含ブロックの高さが確定しているかなどの条件で解決方法が異なるため、幅の%と同じ感覚で指定しないようにしましょう。

4. まとめ

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

次の講座