height

CSSプロパティ「height」についての解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

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で指定した高さと同じ比率で幅も拡大/縮小される。