解 説

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

「width:100%」について

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

「width:100%」のサンプル

HTMLコード

CSSコード

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

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

max-width:100%の指定

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

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

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

結果としては、「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コード

CSSコード