Go to information

min-width

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

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

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

<長さ>
"em", "px" などの単位識別子を伴う数値で指定(負の値は不正)
<パーセンテージ>
包含ブロックの横幅を基準とするパーセンテージ(%)による割合で指定(負の値は不正)

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

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

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

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

サンプル

記述例
div {
min-width : 750px ; height : 100px ;
background : gray ; border : 3px dotted black ;
}
表示例

このサンプルでは、min-widthプロパティで "750px" 以上はいくら広がってもいいが、"750px" からは横幅を縮めない設定を行っています。min-widthプロパティに対応する UA であれば、表示域の横幅を "750px" 以下にすると、要素のボックスが表示域の外側にはみ出して横スクロールバーを生じさせることでしょう。たとえば、これは大きな一枚の画像を背景画像として使う場合に、その画像の全体が見えるように、背景画像が表示される要素の内容領域を指定の値以下に縮めないようにするのに有用でしょう。

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

直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!