W3G

max-widthプロパティの値

max-widthプロパティに指定できる値は、それぞれ以下の意味を示します。

none

横幅に対して制限をしないように設定します

<長さ>

"em", "px" などの単位識別子を伴う数値で指定（負の値は不正）

<パーセンテージ>

包含ブロックの横幅を基準とするパーセンテージ（%）による割合で指定（負の値は不正）

最大の横幅に対して、最小の横幅（これ以上は縮めない設定）は、min-widthプロパティで設定します。max-widthプロパティと min-widthプロパティは同時に指定可能です。max-widthプロパティで指定した横幅の値よりも、min-widthプロパティで指定した横幅の値が大きい場合、min-widthプロパティの値は、max-widthプロパティと同じ値に割り当て直されます。

また、widthプロパティで指定した横幅の値が、max-widthプロパティで指定した値より大きい場合や min-widthプロパティで指定した値より小さい場合、これらの指定値は、widthプロパティの値として割り当て直されます。

max-widthプロパティの実装状況

IE

◯：IE7よりサポート

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

Internet Explorer 6はmax-heightプロパティに対応していません。

サンプル

#main {
max-width : 30em ;
padding : 1em ;
border-right : 3px dotted orange ;
}

このサンプルでは、最大の横幅を "30em" ということで、1行のテキストの長さを約30文字分に制限しています。しかし、max-widthプロパティは widthプロパティとは違いボックスの横幅を固定することはありません。最大の横幅を "30em" に制限するだけで、画面の表示域が狭められると、テキストなどの行内容は表示域に応じて、はみ出すことなくボックス内に収まろうとします。

つまり、一定の横幅の制限を設けた上で、どんなに解像度の小さな環境でも横スクロールを生じさせることのない快適な観覧状況の提供を可能にします。このように max-widthプロパティは、幅広いデバイスや環境に対応できる融通性の高いデザインを実現するのに有用です。