1. TOP
  2. html&CSS入門
  3. CSSのmaxwidthとmin-widthの使い方解説!効かない場合の対処法

CSSのmaxwidthとmin-widthの使い方解説!効かない場合の対処法

max-widthmin-widthは、要素の横幅の最大値や最小値を指定するプロパティです。

  • max-width
    要素の横幅の最大値を指定します。
  • min-width
    要素の横幅の最小値を指定します。

max-widthやmin-widthの使い所

例えば、横幅が100%のボックスを考えてみましょう。横幅が100%の場合、みているブラウザの幅がどうであれ、横幅いっぱいに広がります。この時、「スマホでは100%に広がって欲しいけど、パソコンで100%まで広がると大きすぎるなあ」ということがよく起こります。

具体的に言い換えると、「基本は横幅100%だけど、500px以上は大きくならないようにしたい!」というようなケースが発生します。こういった場合に、最大値・最小値を指定できるmax-widthmin-widthを使うことでやりたいことを実現できます。

width: 100%;
max-width: 500px;

このように指定することで、基本の横幅は100%でありながら、500pxを超えるような場合はそれ以上広がらなくなります。

言い換えれば、max-width は 指定された幅を超えた時、width を上書きすると考えても良いでしょう。

max-widthやmin-widthの使い方

max-widthmin-widthは、数値で指定するかnoneを指定します。

  • none
    最大値・最小値の制限をしません。初期値です。
  • 数値で指定
    数値+単位(px, %, pt, em…)で指定します。

max-widthの使い方

max-widthは横幅の最大値を指定することができます。

上述したとおり、「スマホでは100%に広がって欲しいいけど、パソコンで100%まで広がると大きすぎるなあ」という場合などによく使われます。

実際に使ってみましょう

この例では、子要素にmax-widthを設定したものと、してないものでどういう違いが出るか確かめてみます。

 <div id="demo_201">親要素
   <div id="demo_201-2">max-widthあり</div>
   <div id="demo_201-3">max-widthなし</div>
 </div>
 #demo_201{
   width: 350px;
   height: 250px;
   background-color: tomato;
 }

 #demo_201-2{
   width: 100%;
   max-width: 150px;
   
   /*   以下装飾 */
   height: 100px;
   background-color: royalblue;
   color: #fff;
 }

 #demo_201-3{
   width: 100%;
   
   /*   以下装飾 */
   height: 100px;
   background-color: blue;
   color: #fff;
 }
親要素
max-widthあり
max-widthなし

子要素には両方width:100%を指定しているので、親要素いっぱいまで広がるはずですが、max-width: 150px;を設定したほうは、横幅が150pxになっているのがわかります。

また、画像の横幅にmax-widthを使う方法もよく使われます。

<div id="demo_202">
   <img src="https://wunderstand.net/wp-content/uploads/2019/06/01.jpg" alt="">
 </div>
#demo_202{
   width: 350px;
 }
 #demo_202 img{
   max-width: 100%;
 }

この例の場合、画像にmax-width: 100%;を設定していますが、この指定がなければ画像は親要素をはみだしてしまいます。

画像に%をで指定すると、親要素の横幅の割合になるので、max-width: 100%;を設定することで、「最大でも親要素の横幅」という意味となり、はみ出さなくなります。

「width:100%;」との違い

ちなみにimgにwidth:100%を指定しても同じような表示になります。

ただしこの場合は、常に親要素の100%という意味になるので、たとえば画像が親要素より小さい場合も拡大して表示することになります。

拡大された画像は劣化が激しく、サイトにイメージを大きくそこなってしまうため、拡大したくない場合はmax-widthを使いましょう。

min-widthの使い方

min-widthは横幅の最小値を指定することができます。

min-widthmax-widthとは逆で、小さくなりすぎなようにしたい場合に使います。

例えば、width:50%の要素の場合、パソコンではちょうどよいサイズでもスマホだと、かなり小さくなってしまう可能性があります。そういった場合にそなえて、最小値を設定しておけば、小さくなりすぎることを防ぐことができます。

実際に使ってみましょう

この例では、子要素にmin-widthを設定したものと、してないものでどういう違いが出るか確かめてみます。

<div id="demo_203">親要素
   <div id="demo_203-2">min-widthあり</div>
   <div id="demo_203-3">min-widthなし</div>
 </div>
#demo_203{
   width: 300px;
   height: 250px;
   background-color: tomato;
 }

 #demo_203-2{
   width: 100%;
   min-width: 350px;
   
   /*   以下装飾 */
   height: 100px;
   background-color: royalblue;
   color: #fff;
 }

 #demo_203-3{
   width: 100%;
   
   /*   以下装飾 */
   height: 100px;
   min-width: 150px;
   background-color: blue;
   color: #fff;
 }
 
親要素
min-widthあり
min-widthなし

2つの子要素にはwidth:100%を指定しているので、親要素と同じ横幅になるはずですが、片方にはmin-width: 350px;を設定しているので、それ以上は小さくならなくなります。結果的に、親要素をはみ出していますね。

これが親要素が350pxを超えると、親要素と同じ大きさになるようになります。

このようにmin-widthを使うことでこれ以上小さくならないという制限をかけることができます。

効かない?imgにpaddingやborderをつける場合は注意

max-width:100%を設定したimg要素に、borderやpaddingを設定すると親要素からはみでます。

例を見てみましょう。

 <div id="demo_204">
   <p>border,paddingなし</p>
   <img id="demo_204-2" src="https://wunderstand.net/wp-content/uploads/2019/06/01.jpg"" alt="">
   <br>
   <p>border,paddingあり</p>
   <img id="demo_204-3" src="https://wunderstand.net/wp-content/uploads/2019/06/01.jpg"" alt="">
 </div>
#demo_204{
   width: 350px;
   background-color: tomato;
 }

 #demo_204-2{
   max-width: 100%;
 }

 #demo_204-3{
   max-width: 100%;
   border: 1px solid #000;
   padding: 20px;
 }

border,paddingなし


border,paddingあり

borderやpaddingを設定した方が親要素からはみ出していますね。

widthには、borderとpaddingが含まれないため、その分大きくなってしまうんですね。横幅が親要素の100%になるような画像はこのようなことが起こることがあるので注意が必要です。

はみ出す現象を解決するには、box-sizingを使います。box-sizing: border-boxを設定することで、はみ出さなくなります。

 <div id="demo_205">
   <p>border,paddingあり</p>
   <img id="demo_205−2" src="https://images.unsplash.com/photo-1562154152-2a929b0dc218?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
 </div>
 #demo_205{
   width: 350px;
   background-color: tomato;
 }
 #demo_205−2{
   box-sizing: border-box;
   max-width: 100%;
   border: 1px solid #000;
   padding: 20px;
 }
 

border,paddingあり

box-sizing: border-boxを設定すると横幅にborderとpaddingを含むように変更することができます。box-sizingについての詳しい解説は、下記をご覧ください。

まとめ

  • max-widthは要素の横幅の最大値を指定します。
  • min-widthは要素の横幅の最小値を指定します。