height
、width
、max-height
、max-width
、min-height
、min-width
: 高さと幅 CSSプロパティ
このページで解説するコードの実行結果。(タイトルの文字列をクリックすると、コードに移動)
line 2
line 3
line 4
line 5
line 6
line 7
line 8
HTML
& CSS
このページでは、以下のコードをデフォルトとして使用している。
概要
ボックス(ブロック)の高さと幅を指定する。
設定 | 固定値 | 最大 | 最小 |
---|---|---|---|
高さ | height | max-height | min-height |
幅 | width | max-width | min-width |
なお、これらの値を設定すると、子要素(や含まれる文字列)がはみ出す場合がある。
はみ出しに対する設定はoverflow | text-overflow | resize : はみ出し/省略記号/リサイズを参照。
height
: 高さ
height
でボックスの高さを指定できる。
.child { height: 10em; }
%
で指定する親要素(.parent
)の高さに対する割合を%
で指定することができる。
.parent { height: 10em; } .child { height: 50%; }
width
: 幅
width
でボックスの幅を指定できる。
.child { width: 15em; }
%
で指定する親要素(.parent
)の幅に対する割合を%
で指定することができる。
.parent { width: 15em; } .child { width: 50%; }
最大値/最小値を指定する
設定 | 固定値 | 最大 | 最小 |
---|---|---|---|
高さ | height | max-height | min-height |
幅 | width | max-width | min-width |
応用になるが、最大値/最小値を使うとリサイズ(resize
)の上下限を設定することもできる。
.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 ); }
<div class="sample"> リサイズ可能(10em ~ 20em) </div>
max-height
: 高さの最大値
子要素(.child
)にmax-height: 10em
を指定した。
4行であれば10em
の高さに収まっている。
.child { max-height: 10em; }
<div class="parent"> <div class="child"> line 1<br> line 2<br> line 3<br> line 4<br> </div> </div>
line 2
line 3
line 4
8行にした場合、10em
の高さまでは広がるが、そこに収まらない行ははみ出す。( overflow
プロパティを参照 )
.child { max-height: 10em; }
<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 2
line 3
line 4
line 5
line 6
line 7
line 8
min-height
: 高さの最小値
子要素(.child
)にmin-height: 10em
を指定した。
この結果はheight: 10em
の場合と同じ。
.child { min-height: 10em; }
<div class="parent"> <div class="child"> child </div> </div>
HTMLコードの文字列を8行にした場合、10em
以上の高さが必要であるがmin-height
なので、自動的に高くなる。
.child { min-height: 10em; }
<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 2
line 3
line 4
line 5
line 6
line 7
line 8
これをmin-height
ではなくheight
にした場合、そこに収まらない行ははみ出す。( overflow
プロパティを参照 )
.child { height: 10em; }
<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 2
line 3
line 4
line 5
line 6
line 7
line 8
max-width
: 幅の最大値
子要素(.child
)にmax-width: 15em
を指定した。
.child
はブロック要素(<div>
)なので、15em
以内であれば横に広がる。
.parent { width: 15em; } .child { max-width: 15em; }
親要素(.parent
)を広くしてみた。
子要素は15em
までは広がるが、それ以上は広がらない。
.parent { width: 25em; } .child { max-width: 15em; }
min-width
: 幅の最小値
子要素(.child
)にmin-width: 10em
を指定した。
.child
はブロック要素(<div>
)なので、10em
以上であれば自動的に横に広がる。
.parent { width: 20em; } .child { min-width: 10em; }
親要素(.parent
)を狭くしてみた。
子要素は10em
までは縮まるが、それ以上は縮まらない。今の場合、親要素の幅が8em
なのではみ出している。
.parent { width: 8em; } .child { min-width: 10em; }
Emmet : h
w
記述 | Visual Studio Code |
---|---|
h | height: ; |
w | width: ; |
mah | max-height: ; |
mih | min-height: ; |
maw | max-width: ; |
miw | min-width: ; |