概要
CSSプロパティ｢height｣は、ブロックレベル要素や置換要素（<img>, <input>, <textarea>, <select>など）の領域の高さを指定することができます。また横幅を指定するプロパティに width があります。
<div>指定なし</div>
<div class="height">高さ指定あり</div>
<style>
div {
background-color: #b0e0e6;
margin-bottom: 10px;
}
.height {
height: 100px;
}
</style>値の指定方法
{ height: キーワード, 値, パーセント}実数値 + 以下のような単位で指定します。マイナス値は指定できませんので、注意しましょう。
| 値 | 説明 |
|---|---|
| auto | 初期値です。自動的に設定されます。 |
| 値 | px, em, %で指定。マイナス値は指定できません。 |
値の単位の詳細は以下の通りです。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
実用における注意点
パーセントが指定された場合の振る舞い
画面領域いっぱいに要素を広げたい場合などのケースがあるとします。おそらく height: 100% と指定するでしょう。例を見てみましょう。
<div class="height-100">height:100%;指定</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: #b0e0e6;
margin-bottom: 10px;
}
.height-100 {
height: 100%;
}
</style>しかし、画面いっぱいに要素を広げることができませんでした。では広げた例をみてみましょう。
<div class="height-100">height:100%;指定</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: #b0e0e6;
margin-bottom: 10px;
}
/* html要素とbody要素に100%を指定 */
html {
height: 100%;
}
body {
height: 100%;
}
.height-100 {
height: 100%;
}
</style>今度は広げることができました。
これは、パーセントを指定した際の、値の算出方法がポイントになります。パーセントを指定した場合は、包含ブロックの高さに対して計算されるのです。もう少し具体的な例として、高さに100pxを指定した青いブロック要素の中に、パーセントを指定した黄色のブロック要素Bを入れてみます。
<p>height:100pxの包含ブロック</p>
<div>
<p class="height-30">高さ30%のブロック<p>
</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: #b0e0e6;
margin-bottom: 10px;
height: 100px;
}
.height-30 {
background-color: #eeee88;
height: 30%;
}
</style>そうすると黄色のブロック要素は100pxの要素の30%の値 = 30pxの高さが算出されました。このようにパーセントは、基点がどこになるかで振る舞いが変わってくるので注意しましょう。
使用例
このプロパティと transition プロパティを使ったクリックすると画像が表示される例です。クリック前は高さを０pxにしておき、クリックされた時の値を150pxに指定しておくと実現できます。
<button>クリックすると、画像が出現します</button>
<div class="height-100">
<img src="https://www-creators.com/wp-content/uploads/2017/10/sample.jpg" width="200">
<div>
<style>
button {
padding: 10px;
margin-bottom: 10px;
}
/*高さを0px指定*/
.height-100 {
overflow: hidden;
height: 0;
}
/*クリック後の値に150pxを指定*/
button:active + .height-100,
button:focus + .height-100 {
transition: 0.5s;
height: 150px;
}
</style>