files/ja/web/css/height/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

---
title: height
slug: Web/CSS/height
tags:
  - CSS
  - CSS プロパティ
  - レイアウト
  - リファレンス
  - 垂直
  - 寸法
  - height
  - recipe:css-property
  - size
browser-compat: css.properties.height
translation_of: Web/CSS/height
---
{{CSSRef}}

**`height`** は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティは[コンテンツ領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area)の高さを定義します。{{cssxref("box-sizing")}} が `border-box` に設定されていた場合は、 [境界領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area)の高さを定義します。

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

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

## 構文

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

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

/* キーワード値 */
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;

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

### 値

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

## アクセシビリティの考慮

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

- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)

## 公式定義

{{CSSInfo}}

## 形式文法

{{csssyntax}}

## 例

<h3 id="Setting_height_using_pixels_and_percentages">ピクセル数とパーセント値を使用して高さを設定</h3>

#### HTML

```html
<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
  <div id="child">
    I'm half the height of my parent.
  </div>
</div>
```

#### CSS

```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('Setting_height_using_pixels_and_percentages', 'auto', 240)}}

## 仕様書

{{Specifications}}

## ブラウザーの互換性

{{Compat}}

## 関連情報

- [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
- {{cssxref("width")}}
- {{cssxref("box-sizing")}}
- {{cssxref("min-height")}}, {{cssxref("max-height")}}
- 対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}}