【CSS入門】heightで要素の高さを指定しよう

この記事ではCSSのheightプロパティについて解説します。

heightとは？

ブロックレベル要素やインラインブロックの高さを指定します(インライン要素には指定できません)。widthと違いheightは、指定しなくてもブラウザの縦いっぱいに広がらないです。

縦いっぱいに広げたい場合は要素と共にhtmlとbodyの高さを100%指定する方法と、要素だけに100vh(viewport height)を指定する方法があります。

heightの使い方

heightに指定できる値は以下の通りです。

height: auto;

heightの初期値がこれです。

高さを指定しないと、高さが文字や画像などの要素の中身の分だけになるので、ウィンドウの縦いっぱいに広がりません。

HTML

<div class="BOX-A">BOX-A</div>

CSS

.BOX-A{
  height: auto;
}

height: ○○px;

要素の高さをpxで指定します。

pxは絶対値なのでwidthと同様、子要素の高さを親要素の高さより大きくしてはいけません。

HTML

<div class="box">BOX</div>

CSS

.box{
  height: 500px;
}

height: ○○%;

要素の高さを%で指定します。

基本的に高さを%で指定する場面はほぼありません。

height: ○○vh;

要素の高さをvhで指定します。

vhはviewport heightの略で、直訳すると「表示領域の高さ」です。100vwは100%なので100vwと指定すると、要素がウィンドウの高さいっぱいに広がります(50vhだとウィンドウの高さの半分に)。

HTML

<div class="box">BOX</div>

CSS

.box{
  height: 100vh;
}

ちなみにウィンドウの高さいっぱいに広げる方法は他にもありますので、興味があるかたは以下の記事をお読みください。

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の3点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。