min-widthとmax-widthとは？

レスポンシブデザインでよく使われます。
レスポンシブデザインとはスマホでもPCでも、どんな大きさの端末で見てもちょうどいい大きさに表示されるWebデザインのことです。
レスポンシブデザインを作るためには、min-widthとmax-widthを避けては通れません。これは、それぞれwidthの最小値と最大値を決める便利なものです。といってもなかなか分かりづらいと思うので、順々に解説していきます。

min-width(最小幅)の使い方

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

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

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

min-widthの指定方法

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

PCでみる分にはwidth:50%はちょうどいい大きさだけど、スマホでは小さすぎる、ということがレスポンシブ対応のウェブサイトを制作していると起こります。
そんなときにmin-widthを使えば「どんな端末・ブラウザで見てもこれよりは幅が小さくならない」という設定ができます。

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

【HTML】

⬇︎親要素大きめの場合

<div class="sample1">
　　　<p class="no_min">最小幅なし</p>
　　　<p class="min_300">最小幅300px</p>
</div>

⬇︎親要素小さめの場合<

<div class="sample2">
　　　<p class="no_min">最小幅なし</p>
　　　<p class="min_100">最小幅300px</p>
</div>

【CSS】

/*親要素大きめ*/

.sample1 {width: 600px;
  background:blue;
  }

/*親要素小さめ*/

.sample2 {width: 300px;
  background:blue;
  }

/*最小幅なし*/

.no_min {
  background:purple;
  width: 50%
  }

/*最小幅あり*/

.min_300 {
  background:orange;
  width: 50%;
  min-width: 300px
  }

【表示例】


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

このようにmin-widthを使うことで、それぞれの要素に対して「これよりは小さくならない」という制限を設定できます。

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

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

p {
max-width :300px;
}


= 要素が300pxより大きくならない（300px以下）という意味です。

ではmax-widthは具体的にどのように使うのでしょうか。見ていきましょう。

max-widthの指定方法

たとえば要素がwidth:80%のときスマホで見るとちょうど良い大きさなのに、PCで見ると大きすぎて見にくい、なんてことがあります。
そんなときmax-width（最大幅）が決まっていれば「画面の大きいPCで見ても、これ以上は幅が大きくならない」という設定ができます。

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

【HTML】

⬇︎親要素小さめの場合

<div class="sample1">
　　　<p class="no_min">最小幅なし</p>
　　　<p class="min_300">最小幅300px</p>
</div>

⬇︎親要素大きめの場合

<div class="sample2">
　　　<p class="no_min">最小幅なし</p>
　　　<p class="min_100">最大幅300px</p>
</div>

【CSS】

/*親要素小さめ*/

.sample1 {width: 300px;
  background:blue;
  }

/*親要素大きめ*/

.sample2 {width: 600px;
  background:blue;
  }

/*最大幅なし*/

.no_min {
  background:purple;
  width: 80%
  }

/*最大幅あり*/

.min_300 {
  background:orange;
  width: 80%;
  min-width: 300px
  }

【表示例】


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

min-widthとmax-widthの使い方　最小幅と最大幅についてでした

以上がmin-widthとmax-widthの説明になります、このようにmin-widthとmax-widthを使うことでスマホやPCを見やすくすることが可能になります。
他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, ,