「width:100%」と「max-width:100%」の違い

今回は「width:100%」と「max-width:100%」の違いについて焦点を当ててみます。

「width:100%」について

次のサンプルを見てください。
全体を囲むdiv要素に「width: 100%」を指定しています。この場合の結果は「width」と「padding」の合計幅がブラウザの幅より大きくなり、右側が切れてしまい横スクロールを使う必要が出てきます。

「width:100%」のサンプル

HTMLコード

<div class="wrap">
<h1>max-widthの例</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam laborum, ab amet, impedit inventore repudiandae delectus? Exercitationem, dolore veritatis odit voluptatum, quasi velit magni qui in incidunt, expedita vero rem.</p>
</div>

CSSコード

body{
  margin:0;
}
.wrap{
  width: 100%;
  background-color: pink;
  padding:50px;
}

このような問題を解決するには一般的にbox-sizing:border-boxを使います。
これは、boxモデルの考え方を変えるプロパティです。値を「border-box」にすることでpaddingやborderの値を含めたものがwidthとなります。
そのため、先ほどのように横スクロールすることもなく綺麗にブラウザ内に「.wrap」が収まります。

「box-sizing:border-box」を使ったサンプル
CSSコード

.wrap{
  width: 100%;
  box-sizing: border-box;
  background-color: pink;
  padding:50px;
}

max-width:100%の指定

max-widthの定義は「 max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。」とされています。
簡単に言うと最大幅を決めるためのものです。最大幅が固定サイズ、例えば600pxだと600px以上にはならないことを示します。

では、「max-width:100%」を先のサンプルで「width:100%」の代わりに指定するとどうなるでしょうか。

「max-width:100%」のサンプル
CSSコード

.wrap{
  max-width: 100%;
  background-color: pink;
  padding:50px;
}

結果としては、「box-sizing:border-box」を使ったサンプルと同様の結果となります。
テキストの内容は綺麗にブラウザ内に表示されます。
max-widthで指定した100％の値で、ブラウザいっぱいにwidthを広げて、padding部分がブラウザからはみ出すように思えますが、実際は違います。ブラウザ内でできるだけ広がって、あたかも「box-sizing:border-box」を使用したかのようにpadding部分がはみ出しません。
この挙動は興味深い動きです。

さらに、不思議な現象があります。
それはimg要素にpaddingやborderをつけた場合です。

img要素に「max-width:100%」を指定した時の問題点

img要素に「max-width:100%」としてpaddingやborderを設定するとimg要素は親要素から飛び出します。

今度のサンプルは「.wrap」に400pxの固定サイズを設定しました。
次にimgタグに「max-width:100%」を指定して、さらにimgタグにpaddingやborderを設定します。
同様に、別の兄弟要素を作成してその要素にはテキストだけ含ませます。そしてこの要素にもimgに設定した「max-width:100%」を指定して、さらにpaddingやborderを設定します。

この時、img要素だけが親から飛び出し、テキストだけ含む要素は親の中に留まるように表示されます。

imgタグに対して「max-width:100%」の設定をすることはフルードイメージ化するときに多用します。
フルードイメージにpaddingやborderをつけるときは用心する必要があります。

フルードイメージの問題を解決するには「box-sizing: border-box」を設定します。

imgにmax-width:100%指定したサンプル
HTMLコード

<div class="wrap">
<h1>max-widthの例</h1>
<img src="img/berry.jpg" alt="">
<p class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam laborum, ab amet, impedit inventore repudiandae delectus? Exercitationem, dolore veritatis odit voluptatum, quasi velit magni qui in incidunt, expedita vero rem.</p>
</div>

CSSコード

.wrap{
　　width: 400px;
　　background-color: pink;
}
img{
　　max-width:100%;
　　height:auto;
　　border:10px solid red;
　　padding:50px;
}
.main{
　　max-width:100%;
　　padding:50px;
　　border:10px solid blue;
}