height/高さ

説明

　heightは高さを固定値や相対値等を使って設定出来ます。記述した文字や画像が設定した高さに満たなくても設定した高さを確保しますが、設定した高さを越える場合ははみ出して表示されます。

構文

　heightプロパティの構文は以下の通りです。

height: 高さ;

　高さの指定は以下が出来ます。

height利用例

　heightの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
height: 60px;
}

<div>60px</div>

　上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。

　文字が60pxの高さに満たなくても60px分の高さが確保されています。

　em指定の例は以下の通りです。分かり易いようにwidthやline-heightも指定しています。

div {
width: 1em;
height: 5em;
line-height:100%;
}

<div>あいうえおかき</div>

　上記を表示すると以下になります。

　5文字分の高さが取られ、6、7文字目ははみ出て表示されています。

　%指定の例は以下の通りです。

div {
height: 80%;
}

<div>height例</div>

　上記を表示すると以下になります。

　点線の枠で高さを60pxに指定しており、その80%の高さを確保します。

　デフォルトのautoでは表示に必要な高さだけ確保されます。

留意点

　<span>タグ等のインラインボックスは必要な高さしか取らないため、指定しても無視されます。

関連ページ

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る