height
height
は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 box-sizing
が border-box
に設定されていた場合は、 境界領域の高さを定義します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
min-height
及び max-height
プロパティは height
を上書きします。
構文
/* キーワード値 */
height: auto;
/* <length> 値 */
height: 120px;
height: 10em;
/* <percentage> 値 */
height: 75%;
/* グローバル値 */
height: inherit;
height: initial;
height: unset;
値
<length>
- 絶対値で高さを定義します。
<percentage>
- 包含ブロックの高さのパーセントで高さを定義します。
auto
- 指定された要素の高さをブラウザーが計算して決めます。
max-content
- 本来の望ましい高さです。
min-content
- 本来の最小の高さです。
fit-content(
<length-percentage>
)- 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, )) です。
形式文法
auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)ここで
<length-percentage> = <length> | <percentage>
例
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%;
}
結果
アクセシビリティの考慮事項
テキストを大きくするためにページを拡大したとき、他のコンテンツを切り捨てたり邪魔したりしないように要素の height
を設定するよう確認してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Box Sizing Module Level 4 height の定義 |
編集者草案 | |
CSS Box Sizing Module Level 3 height の定義 |
草案 | キーワード max-content , min-content , available , fit-content の追加。 |
CSS Level 2 (Revision 1) height の定義 |
勧告 | <length> 値のサポートを追加。どの要素に用いるかを明記。 |
CSS Level 1 height の定義 |
勧告 | 初回定義 |
初期値 | auto |
---|---|
適用対象 | 非置換インライン要素、テーブルの列、列グループを除くすべての要素 |
継承 | なし |
パーセント値 | パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず (すなわち、コンテンツの高さに依存します)、この要素が絶対位置指定されていない場合は、値は auto になります。ルート要素で高さをパーセント値で指定すると、初期包含ブロックに対する相対値になります。 |
計算値 | パーセント値、 auto 、絶対的な長さのいずれか |
アニメーションの種類 | length または パーセント値, calc(); |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- ボックスモデル,
box-sizing
max-height
,min-height
- 対応する論理的プロパティ:
block-size
,inline-size