height

高さを指定します。

書式

height: height

属性値

height
高さを10pxのように数値と単位で指定するか、以下の値から選択します。
意味
auto自動的に調整
inherit継承

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

スタイルシート属性 height の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<table border="1">
 <tr style="height: 1em"><td>1em</td></tr>
 <tr style="height: 2em"><td>2em</td></tr>
 <tr style="height: 3em"><td>3em</td></tr>
 <tr style="height: 4em"><td>4em</td></tr>
</table>
1em
2em
3em
4em

width

スタイルシート属性widthは幅の大きさを指定します。

書式

width: width

属性値

width
幅の大きさを10pxのように数値と単位で指定するか、以下の値から選択します。
意味
auto自動的に調整
inherit継承

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

スタイルシート属性 width の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<table border="1">
 <tr>
  <td style="width: 2em">2</td>
  <td style="width: 4em">4</td>
  <td style="width: 8em">8</td>
  <td style="width: 16em">16</td>
 </tr>
</table>
2 4 8 16

max-height

最大の高さを指定します。

書式

max-height: height
height
最大の高さを10pxのように数値と単位で指定するか、以下の値から選択します。
意味
inherit継承
none制限なし(規定値)

max-width

幅の最大の大きさを指定します。

書式

max-width: width

属性値

width
幅の最大の大きさを10pxのように数値と単位で指定するか、以下の値から選択します。
意味
inherit継承
none制限なし(規定値)

使用例

画面の幅に合わせて画像のサイズを自動調整する(リキッドレイアウト)スタイルシートの例を次に示す。

img {
    max-width: 100%;
    height: auto;
}

max-widthをheightより先に指定する必要がある。順序が逆だと画面の横幅に合わない。

min-height

書式

min-height: height

属性値

height
最小の高さを10pxのように数値と単位で指定するか、以下の値から選択します。
意味
inherit継承

min-width

min-width は幅の最小の大きさを指定するスタイルシート属性です。

書式

min-width: width

属性値

width
幅の最小の大きさを10pxのように数値と単位で指定するか、以下の値から選択します。
意味
auto自動的に調整
inherit継承