概要へ移動

このページで解説するコードの実行結果。(タイトルの文字列をクリックすると、コードに移動)

child
child
リサイズ可能(10em ~ 20em)
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
.parent {
border: solid orange; /* 境界線 */
padding: 1em; /* 内側の余白 */
}
.child {
border: solid red; /* 境界線 */
background-color: #fcc; /* 背景色 */
}
HTML : 適用するHTML
<div class="parent">
<div class="child">
child
</div>
</div>
実行結果
child

概要

ボックス(ブロック)の高さと幅を指定する。

設定固定値最大最小
高さheightmax-heightmin-height
widthmax-widthmin-width

なお、これらの値を設定すると、子要素(や含まれる文字列)がはみ出す場合がある。
はみ出しに対する設定はoverflow | text-overflow | resize : はみ出し/省略記号/リサイズを参照。

height : 高さ

heightでボックスの高さを指定できる。

CSS : height
.child {
height: 10em;
}
実行結果
child
%で指定する

親要素(.parent)の高さに対する割合を%で指定することができる。

CSS : height
.parent {
height: 10em;
}
.child {
height: 50%;
}
実行結果
child

width : 幅

widthでボックスのを指定できる。

CSS : width
.child {
width: 15em;
}
実行結果
child
%で指定する

親要素(.parent)の幅に対する割合を%で指定することができる。

CSS : height
.parent {
width: 15em;
}
.child {
width: 50%;
}
実行結果
child

最大値/最小値を指定する

設定固定値最大最小
高さheightmax-heightmin-height
widthmax-widthmin-width

応用になるが、最大値/最小値を使うとリサイズ(resizeの上下限を設定することもできる。

CSS : リサイズの上下限
.sample {
overflow: hidden;
resize: both;
width: 15em;
height: 15em;
max-width: 20em;
max-height: 20em;
min-width: 10em;
min-height: 10em;
border: 2px solid red;
background-image: linear-gradient( to top left, #eee 10%, red );
}
HTML : 適用するHTML
<div class="sample">
リサイズ可能(10em ~ 20em)
</div>
実行結果
リサイズ可能(10em ~ 20em)

max-height : 高さの最大値

子要素(.child)にmax-height: 10emを指定した。

4行であれば10emの高さに収まっている。

CSS : max-height
.child {
max-height: 10em;
}
HTML : 適用するHTML
<div class="parent">
<div class="child">
line 1<br>
line 2<br>
line 3<br>
line 4<br>
</div>
</div>
実行結果
line 1
line 2
line 3
line 4

8行にした場合、10emの高さまでは広がるが、そこに収まらない行ははみ出す。( overflowプロパティを参照 )

CSS : max-height
.child {
max-height: 10em;
}
HTML : 適用するHTML
<div class="parent">
<div class="child">
line 1<br>
line 2<br>
line 3<br>
line 4<br>
line 5<br>
line 6<br>
line 7<br>
line 8<br>
</div>
</div>
実行結果
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8

min-height : 高さの最小値

子要素(.child)にmin-height: 10emを指定した。

この結果はheight: 10emの場合と同じ。

CSS : min-height
.child {
min-height: 10em;
}
HTML : 適用するHTML
<div class="parent">
<div class="child">
child
</div>
</div>
実行結果
child

HTMLコードの文字列を8行にした場合、10em以上の高さが必要であるがmin-heightなので、自動的に高くなる。

CSS : min-height
.child {
min-height: 10em;
}
HTML : 適用するHTML
<div class="parent">
<div class="child">
line 1<br>
line 2<br>
line 3<br>
line 4<br>
line 5<br>
line 6<br>
line 7<br>
line 8<br>
</div>
</div>
実行結果
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8

これをmin-heightではなくheightにした場合、そこに収まらない行ははみ出す。( overflowプロパティを参照 )

CSS : height
.child {
height: 10em;
}
HTML : 適用するHTML
<div class="parent">
<div class="child">
line 1<br>
line 2<br>
line 3<br>
line 4<br>
line 5<br>
line 6<br>
line 7<br>
line 8<br>
</div>
</div>
実行結果
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8

max-width : 幅の最大値

子要素(.child)にmax-width: 15emを指定した。

.childはブロック要素(<div>)なので、15em以内であれば横に広がる。

CSS : max-width
.parent {
width: 15em;
}
.child {
max-width: 15em;
}
実行結果
child

親要素(.parent)を広くしてみた。

子要素は15emまでは広がるが、それ以上は広がらない。

CSS : max-width
.parent {
width: 25em;
}
.child {
max-width: 15em;
}
実行結果
child

min-width : 幅の最小値

子要素(.child)にmin-width: 10emを指定した。

.childはブロック要素(<div>)なので、10em以上であれば自動的に横に広がる。

CSS : min-width
.parent {
width: 20em;
}
.child {
min-width: 10em;
}
実行結果
child

親要素(.parent)を狭くしてみた。

子要素は10emまでは縮まるが、それ以上は縮まらない。今の場合、親要素の幅が8emなのではみ出している。

CSS : min-width
.parent {
width: 8em;
}
.child {
min-width: 10em;
}
実行結果
child

Emmet : h w

記述Visual Studio Code
hheight: ;
wwidth: ;
mahmax-height: ;
mihmin-height: ;
mawmax-width: ;
miwmin-width: ;