Go to information

max-width

max-widthプロパティは要素の生成するボックスの最大の横幅(これ以上は広げない設定)を設定します。

初期値
none
適用対象
すべての要素非置換インライン要素表関連要素を除く)
継承
しない
メディア
visual

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プロパティの実装状況

Windows版Internet Explorer
Windows版Internet Explorer 6 は max-widthプロパティに対応していません。
Windows版Internet Explorer 7 より max-widthプロパティに対応しています。
Firefox
Opera
Safari
○(画像を表示する要素に指定し、実際の画像サイズよりも拡大した場合に縦横の比率を変えてしまう)
Macintosh版Internet Explorer 5
×

Windows版Internet Explorer 6、及び Macintosh版Internet Explorer 5 は max-heightプロパティに対応していません。Windows版については、Internet Explorer 7 より対応しています。

サンプル

記述例
div {
max-width : 45em ;
padding : 1em ;
border-right :3px dotted orange ;
}
表示例

このサンプルでは、最大の横幅を "45em" ということで、1行のテキストの長さを約45文字分に制限しています。しかし、max-widthプロパティは widthプロパティとは違いボックスの横幅を固定することはありません。最大の横幅を "45em" に制限しているだけで、画面の表示域が狭められると、テキストなどの行内容は表示域に応じて、はみ出すことなくボックス内に収まろうとします。つまり、一定の横幅の制限を設けた上で、どんなに解像度の小さな環境でも横スクロールを生じさせることのない快適な観覧状況の提供を可能にします。このように max-widthプロパティは、ユーザーの環境に幅広く対応できる融通性の高いデザインを実現するのに有用です。

現在位置
  1. W3G
  2. CSS
  3. ボックス
  4. max-width
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:38:34+09:00
更新
2008-12-29T04:30:38+09:00
URI
http://w3g.jp/css/box/max-width
検索