height
ボックスの「高さ」を指定するためのプロパティ。
値は「px」単位もしくは親ボックスに対する「％」で指定することができる。
値
| pxで指定 | 指定したい高さをpxで指定する。この場合、ディスプレイの大きさに左右されず、指定した部分の高さが固定される。 |
|---|---|
| ％で指定 | 親ボックスに対する割合で指定する。この場合、親ボックスの幅により、指定した部分の幅が変動する。ただし、親ボックスの高さが定められていない場合などでは、ブラウザのウインドウサイズに対する割合で高さが変動する。 |
| autoで指定 | 何もしていない場合は「auto」という値になる。 |
使用例 - サンプル(A) / サンプル(B)
サンプル(A)
[CSSの記述]
.sampleA { height:100px; background-color:#ffee66; }
[HTMLの記述]
<p class="sampleA">テキストテキスト</p>
[ブラウザ上の表示]
heightプロパティの値に100pxを指定した場合、指定したボックスの高さ幅が100pxとなる。
サンプル(B)
[CSSの記述]
.sampleB { height:100px; }
[HTMLの記述]
<img alt="サンプル" src="hogehoge.gif" class="sampleB" />
[ブラウザ上の表示]
画像のheightを指定した場合、元のサイズに関係なくCSSで指定した高さとなる。
同時にwidth（幅）を指定しない場合、heightで指定した高さと同じ比率で幅も拡大／縮小される。
- 前の記事：width
- 次の記事：background