Dimension - 寸法
- width/height〔要素の幅・高さ〕
- max-width/max-height〔要素の最大幅・最大高さ〕
- min-width/min-height〔要素の最小幅・最小高さ〕
- !DOCTYPEによるブラウザのpaddingの解釈の違い
width/height
要素の幅・高さ
unknown
widthプロパティ、heightプロパティは、要素の幅・高さを指定します。
- デフォルト値：auto
- 適用：全要素（非置換インライン要素、テーブル行、行グループを除く
- 継承：しない
値
widthプロパティを絶対サイズで指定する場合は、!DOCTYPEが互換モードの場合ブラウザによってpaddingの解釈が異なることに注意して下さい。 詳細は、!DOCTYPEによるブラウザのpaddingの解釈の違いで解説しています。
<style type="text/css">
.whButton { width:auto; height:30px; }
.whTextarea { width:80%; height:5em; }
.whSelect { width:200px; }
.whTable { width:auto; }
</style>
<p>
<input type="button" class="whButton" value="ボタン" />
</p>
<p>
<textarea class="whTextarea">width:80%; height:5em; を指定しています。</textarea>
</p>
<p>
<select class="whSelect">
<option value="">▼選択してください</option>
<option value="1">項目1</option>
<option value="2">項目2</option>
<option value="3">項目3</option>
</select>
</p>
<table class="whTable" border="1">
<tr><td>あああ</td><td>いいい</td></tr>
<tr><td>あああ</td><td>いいい</td></tr>
<tr><td>あああ</td><td>いいい</td></tr>
</table>
| あああ | いいい |
| あああ | いいい |
| あああ | いいい |
max-width/max-height
要素の最大幅・最大高さ
unknown
max-widthプロパティ、max-heightプロパティは、要素の幅・高さの最大値を指定します。
- デフォルト値：none
- 適用：全要素（非置換インライン要素、テーブル行、行グループを除く
- 継承：しない
値
<style type="text/css">
#d_maxwh {
margin:0; padding:0;
background:#fff url(/content/img/grid.gif) repeat top left;
width:100%; height:200px;
}
#d_maxwh div {
margin:0; padding:0;
background:yellow;
max-width:300px;
max-height:20px;
/* IE対応 */
width:auto!important;
height:auto!important;
width:300px;
height:20px;
}
</style>
<div id="d_maxwh">
<div>
max-width:300px;<br>
max-height:20px;
</div>
</div>max-height:20px;
min-width/min-height
要素の最小幅・最小高さ
unknown
min-widthプロパティ、min-heightプロパティは、要素の幅・高さの最小値を指定します。
- デフォルト値：0
- 適用：全要素（非置換インライン要素、テーブル行、行グループを除く
- 継承：しない
値
<style type="text/css">
#d_minwh {
margin:0; padding:0;
background:#fff url(/content/img/grid.gif) repeat 0 0;
width:100%; height:200px;
}
#d_minwh div {
margin:0; padding:0;
background:yellow;
min-width:300px;
min-height:100px;
/* IE対応 */
width:auto!important;
height:auto!important;
width:300px;
height:100px;
}
</style>
<div id="d_minwh">
<div>
min-width:300px;<br>
min-height:100px;
</div>
</div>min-height:100px;
!DOCTYPEによるブラウザのpaddingの解釈の違い
unknown
!DOCTYPEに互換モードを指定している場合、IEではwidthで指定した値にpaddingで指定した値が含まれます。 一方、FirefoxやNetscapeではwidthで指定した値＋paddingで指定した値という風に解釈されます。
!DOCTYPEに標準モードを指定している場合は、IE、Firefox、Netscape全てwidthで指定した値＋paddingで指定した値になります。
例えばwidth=100px、padding=20pxを指定した場合、以下のようになります。
<style type="text/css">
*,body {
margin:0; padding:0;
}
div.grid {
margin:0; padding:0;
background:#fff url(/content/img/css/grid.gif) repeat top left;
width:400px; height:400px;
}
div.box1 {
margin:0; padding:20px;
background-color:orange;
width:100px; height:100px;
}
</style>
<div class="grid">
<div class="box1"></div>
</div>
| IE | Firefox、Netscape | |
|---|---|---|
| 互 換 モ ｜ ド |
 width(100px)にpadding(20px)も含まれるため、そのままwidth=100pxになります。 |
 width(100px)+padding(20px)+padding(20px)と解釈されるため、結果としてwidth=140pxになります。 |
| 標 準 モ ｜ ド |
width(100px)+padding(20px)+padding(20px)と解釈されるため、結果としてwidth=140pxになります。 |
width(100px)+padding(20px)+padding(20px)と解釈されるため、結果としてwidth=140pxになります。 |