ホーム | 領域(ボックス)・目次

●幅の最小値と最大値を決める

 min-width および、max-widthは、それぞれ要素の幅の最小値と最大値を指定するプロパティです。非置換インライン要素、表関係の要素を除くすべての要素に適用させることができます。指定できる値は長さを表す単位付きの数値かパーセント付きの数値ですが、max-widthプロパティのほうは幅の制限をしない noneの値も指定できます。このプロパティに対応しないブラウザもありますので対応状況にご注意ください。また、子要素には継承しません。

幅の最小値 min-width: 200px;
幅の最大値 max-width: 200px;

 このプロパティに対応しているブラウザであれば、上記の(黄色い)ボックスの幅は最低200px確保され、これ以上縮まることはありません。下の(赤い)ボックスの幅は最高で200pxで、これ以上大きくなることはありません。すなわち、min-widthは指定した値より小さくはならないプロパティ、max-widthは指定した値より大きくならないプロパティです。

【CSS】

.sample1 {
 min-width: 200px;
 height: 2em;
 background-color: yellow;
 color: black;
 padding: 2px;
 text-align: left;
}
.sample2 {
 max-width: 200px;
 height: 2em;
 background-color: fuchsia;
 color: black;
 padding: 2px;
 text-align: left;
}

※直接関係のある書式は、.sample1 { min-width: 200px; }、.sample2 { max-width: 200px; }です。

【HTML】

<div class="sample1">幅の最小値 min-width: 200px;</div>
<div class="sample2">幅の最大値 max-width: 200px;</div>

 ブラウザの対応状況は以下になっていますが、ブラウザの種類やバージョンにより対応が異なっています。参考のため、開発がすでに終了されている既存のブラウザの対応状況も添えてあります。あらかじめ、ご了承ください。

主なブラウザの種類と対応状況
種類 対応状況
ウィンドウズ版IE(v6.0以下) ×
ウィンドウズ版IE(v7.0以降)
Mac版IE(v4.5、v5.0) ×
Netscape(v6.0、v7.0)
Firefox 
Opera(v6.0以降)
Google chrome
Safari

【注意】 

 最新のメジャーブラウザにはズーム機能が付いていますが、ズーム機能を使うとスタイルの反映の確認がしにくいと思いますので、これらのプロパティの設定を行った場合、ブラウザの幅を狭めたり広くしたりすると確認しやすいかと思います。(ズーム機能を制御するプロパティではないということです。)また、適用される場合には種類の異なるブラウザで確認されることをおすすめします。

サイト全体・目次 | 領域(ボックス)・目次

Copyright (C) 2011 http://www.xml.vc/ All Rights Reserved.