| プロパティ名 | 値 | 説明 | 適用対象 | 継承 |
|---|---|---|---|---|
| width: | 単位付きの数値 | 幅 | テキストのインライン要素と COI要素とCOIGROUP要素以外 | なし |
| height: | 単位付きの数値 | 高さ | テキストのインライン要素と COI要素とCOIGROUP要素以外 | なし |
| 値 | 説明 | |
|---|---|---|
| 幅・高さ | 単位付きの数値 | 数値にpx, %, em等の単位と付けて指定、 又はautoを指定 |
widthとheightプロパティは、ボックスの幅と高さを設定します。
値には、数値にpx, %, em 等の単位を付けて指定します。%で指定する場合は、そのボックスを含むボックスの幅又は高さに対する割合になります。
値として「auto」を指定すると状況に応じて自動的に調整されますが、置き換え要素の場合には本来の幅や高さになります。
値には、数値にpx, %, em 等の単位を付けて指定します。%で指定する場合は、そのボックスを含むボックスの幅又は高さに対する割合になります。
値として「auto」を指定すると状況に応じて自動的に調整されますが、置き換え要素の場合には本来の幅や高さになります。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
body{margin:0}
p{text-align:center;
background-color:#FFD700;
margin-left:auto;
margin-right:auto;
border:2px red solid;
}
b{font-size:1.2em;
color:black;
}
.mid{vertical-align:middle}
#sampl01{width:150px;height:150px;}
#sampl02{width:10em;height:10em;}
#sampl03{width:auto;height:auto;}
#sampl04{width:100px;height:80px;}
-->
</style>
</head>
<body>
<p id="sampl01"><b>width:150px height:150pxで表示</b></p>
<p id="sampl02"><b>width:10em height:10emで表示</b></p>
<div><img src="..//img/画像ファイル" id="sampl03" class="mid"><b>オリジナルサイズ500px×400px</b>
<img src="..//img/画像ファイル" id="sampl04" class="mid"><b>スモールサイズ100px×80px</b></div>
</body>
</html>
