CSS ・ 余白・サイズ
height
高さ
要素の高さを指定します。初期値の auto では、中身の量に合わせて高さが決まります。
01
サンプルコード
HTML
1<div class="row">
2 <div class="box auto">auto</div>
3 <div class="box fixed">height: 100px</div>
4 <div class="box min">min-height: 60px</div>
5</div>
CSS
1.row {
2 display: flex;
3 gap: 12px;
4 align-items: flex-start;
5}
6.box {
7 width: 120px;
8 padding: 8px;
9 background: #f6ead8;
10 border: 1px solid #b68235;
11}
12.fixed {
13 height: 100px;
14}
15.min {
16 min-height: 60px;
17}
02
実行結果
ブラウザでの表示
03
解説
height は要素の高さを指定するプロパティです。初期値の auto では、中の内容がちょうど収まる高さになります。
高さを固定すると、内容が増えたときにはみ出してしまいます。「少なくともこの高さ」にしたい場合は min-height を使うのが安全です。
% で指定するときは、親要素の高さが決まっている必要があります。画面の高さに合わせるなら vh や dvh を使います。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
auto | 内容に合わせる（初期値） |
200px | 固定の高さ |
50% | 親要素の高さの50%（親の高さが必要） |
100vh | 画面の高さ |
100dvh | スマートフォンのアドレスバーの伸縮に対応した画面の高さ |
画面いっぱいのメインビジュアル
min-height に画面の高さを指定すると、内容が多いときは自然に伸びます。
CSS
1.hero {
2 min-height: 100dvh;
3 display: grid;
4 place-items: center;
5}
注意点
- 01文章を含む要素の高さを固定すると、文字を大きくしたときにはみ出します。
- 02スマートフォンの 100vh はアドレスバーの分だけずれることがあります。dvh が使える環境では dvh を使います。