概要

height は、HTML要素の縦の高さを指定するためのCSSプロパティです。 ピクセル・パーセンテージ・em・vh などの単位を使って要素の高さをコントロールできます。特に画像、ボックス、セクションの整列など、デザイン上の見栄えを整える際に使われます。

基本的な使い方

See the Pen heightについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

/* 固定の高さ（ピクセル） */
height: 300px;

/* 親要素に対する割合 */
height: 50%;

/* ビューポートの高さに基づく指定 */
height: 100vh;

/* 自動で高さを調整 */
height: auto;

一般的に、固定値を使うと高さを正確に指定できますが、レスポンシブ対応が必要な場合はパーセンテージや vh 単位の使用が効果的です。auto は、内容の高さに応じて自動調整されます。

出力される内容の例

<div style="height: 100vh;">
  このボックスは画面の高さにフィットします。
</div>

<div style="height: 50%;">
  このボックスは親要素の高さの半分になります。
</div>

役割とメリット（定義リスト形式）

要素の高さを調整

高さを固定または動的に指定して、見た目のバランスを整えます。

ビューポート対応

vh 単位を使うことで、ブラウザの表示領域にフィットしたデザインが可能になります。

レスポンシブデザイン

パーセンテージ指定で、親要素に応じた柔軟な高さ調整が可能です。

余白やはみ出しの制御

overflow や min-height、max-height と組み合わせることで、内容の見切れや崩れを防ぎます。

注意点

• 親要素の高さが未設定の場合、height: 100% は期待通りに動作しません。
• height を固定値で設定すると、内容がはみ出ることがあります（overflow の設定が必要）。
• 要素の内容に応じた柔軟なレイアウトが必要な場合は、height: auto や min-height を使う方が適しています。

まとめ

height は、要素の高さを制御するための基本プロパティであり、レイアウト構成やビジュアル調整に欠かせません。 固定・割合・ビューポート・自動といった多様な単位指定が可能で、他のプロパティ（min-height, max-height, overflow など）と組み合わせることで、より柔軟なデザインが実現できます。