--- title: height slug: Web/CSS/height tags: - CSS - CSS Property - CSS プロパティ - Layout - Reference - Vertical - dimensions - height - 'recipe:css-property' - size - レイアウト translation_of: Web/CSS/height ---
{{CSSRef}}

height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 {{cssxref("box-sizing")}} が border-box に設定されていた場合は、 境界領域の高さを定義します。

{{EmbedInteractiveExample("pages/css/height.html")}}

{{cssxref("min-height")}} 及び {{cssxref("max-height")}} プロパティは height を上書きします。

構文

/* キーワード値 */
height: auto;

/* <length> 値 */
height: 120px;
height: 10em;

/* <percentage> 値 */
height: 75%;

/* グローバル値 */
height: inherit;
height: initial;
height: unset;

値

{{cssxref("<length>")}}
絶対値で高さを定義します。
{{cssxref("<percentage>")}}
包含ブロックの高さのパーセントで高さを定義します。
auto
指定された要素の高さをブラウザーが計算して決めます。
max-content
本来の望ましい高さです。
min-content
本来の最小の高さです。
fit-content({{cssxref("<length-percentage>")}})
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, )) です。

形式文法

{{csssyntax}}

例

HTML

<div id="taller">50ピクセルの高さです。</div>
<div id="shorter">25ピクセルの高さです。</div>
<div id="parent">
  <div id="child">
    親の半分の高さです。
  </div>
</div>

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

結果

{{EmbedLiveSample('Example', 'auto', 240)}}

アクセシビリティの考慮事項

テキストを大きくするためにページを拡大したとき、他のコンテンツを切り捨てたり邪魔したりしないように要素の height を設定するよう確認してください。

仕様書

仕様書 状態 備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'height')}} {{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'height')}} {{Spec2('CSS3 Sizing')}} キーワード max-content, min-content, available, fit-content の追加。
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}} {{Spec2('CSS2.1')}} {{cssxref("<length>")}} 値のサポートを追加。どの要素に用いるかを明記。
{{SpecName('CSS1', '#height', 'height')}} {{Spec2('CSS1')}} 初回定義

{{cssinfo}}

ブラウザーの互換性

{{Compat("css.properties.height")}}

関連情報