height/高さ

heightプロパティは高さを指定出来ます。

説明

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

height説明

構文

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

height: 高さ;

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

【heightでの高さの指定】
高さ 説明
px ピクセル指定
em 文字の大きさに対する割合
% 親ボックスの幅に対する割合
auto 必要な高さ(デフォルト)

height利用例

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

div {
height: 60px;
}

<div>60px</div>

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

60px

 文字が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>

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

height例

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

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

height例

留意点

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

関連ページ

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

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

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

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

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)