【CSS入門】heightで要素の高さを指定するには？パーセントとvhの違いも解説

要素の高さを指定するには、CSSプロパティのheightを使用します。

Webサイト作成において基本的なプロパティであるため、知っている方も多いでしょう。

それでも、100%の指定が思い通りにできなかったり、幅の指定とは感覚が違ったりと、躓くことがあるかと思います。

今回は、CSSプロパティのheightの使い方をマスターしたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSプロパティのheightを使ったWebサイトのカスタマイズが簡単にできるようになりますよ。

ぜひ最後まで読んでくださいね！

heightとは？どんなときに使うもの？

heightは要素の高さを指定するCSSプロパティです。

要素とは、以下のようにHTMLタグで囲われた全体の部分を指します。

<div class="sample01">タグの中身</div>

この要素の高さを指定するには、CSSで以下のように記述します。

.sample01 {
  height: 300px;
}

これで、要素全体の高さが300pxに設定されました。

インライン要素には適用できない

heightの指定は、一部の要素を除いて、インライン要素に適用することができません。

インライン要素とは、「display:inline」となっている要素です。

例えばspan要素などがインライン要素ですね。

「display:block」、もしくは「display:inline-block」を使い、ブロックレベル要素にすることで高さを適用できるようになります。

span{
  display: block;
  height: 200px;
}

これは、widthで指定する横幅においても同様です。

heightの値とは？%とvhは何が違う？

heightの値はpxだけではなく、他にも以下のような単位で指定できます。

ちなみに、初期値はautoとなります。

横幅の指定でautoのときには、横いっぱいに表示されますが、heightのときには、中身の高さの合計分が要素の高さになります。

ただし、中の要素がfloatや「position:absolute」のような特殊な指定の場合には、高さの計算に含まれないため注意が必要です。

それでは、それぞれの単位の特徴と使い方を解説していきましょう。

pxで指定する

pxは基本的な指定で、他のプロパティでも利用されますね。

親要素と子要素がある場合、親要素の高さは子要素より大きくする必要があります。

実際にコードを書いてみましょう。

<div id="sample02">
  <p>子要素</p>
</div>

CSSは以下のように記述します。

.sample02 {
  height: 200px;
  background: orange;
}
p {
  height: 150px;
  background: blue;
}

2つの要素にそれぞれ別の背景色をつけています。

親要素の方がサイズを大きくしているので、オレンジ色がはみ出て表示されていますね。

%で指定する

%は、親要素に対してのパーセンテージで要素の高さを決定します。

具体的には、以下のように記述します。

.sample03 {
  height: 300px;
  background: orange;
}
p {
  height: 50%;
  background: red;
}

親要素が300pxであるため、子要素の高さは50%の150pxとなります。

とはいえ、この方法は扱いづらいこともあって、実際に%を使って指定する場面は少ないです。

親要素のheightが指定されていない場合には、%指定は適用されません。

基準とする値がないため、高さが算出できないからです。

また、%指定で画面の高さいっぱいにしたい場合には、htmlとbodyを含む親要素すべてに100%を指定する必要があります。

画面いっぱいにしたい場合には、以下のvhで指定する方法を使った方が良いですね。

vhで指定する

vhは、「viewport height」の略で、画面サイズに対する高さを指定する単位です。

先ほどの%は親要素を基準として算出されますが、この指定では画面サイズが計算に使われます。

<div class="sample04">要素が画面いっぱいに広がります</div>

CSSは以下のように記述します。

.sample04 {
  height: 100vh;
  background: orange;
}

オレンジ色の要素が画面いっぱいに表示されているのが確認できるかと思います。

widthは、初期値autoで親要素いっぱいに広がるので、上記のように指定していなくても幅いっぱいに広がります。

「width:auto」と「height:auto」は表示が異なるので、きちんと覚えておいた方が良いですね。

heightのリセット方法について

初期値である「height:auto」の指定は、heightをリセットしたいときに使います。

要素に対してheightを指定していた場合に、一部だけ指定を削除したいということがありますよね。

具体的には以下のようなHTMLがあるとします。

<div>要素の高さを指定します</div>
<div>一部だけ高さの指定をリセットします</div>
<div class="reset">ここだけ高さがリセットされます</div>
<div>比較してみましょう</div>

CSSは以下のように記述します。

div {
  height: 50px;
  margin-bottom: 5px;
  background: #eee;
}
.reset {
  height:auto
}

わかりやすいように背景色と要素の下に余白を入れました。

3つ目の要素だけ高さがリセットされていますね。

maxとminについて

要素の高さには、max-heightとmin-heightがあります。これらはそれぞれ最大値と最小値を示します。

高さに制限をつけたいとき、もしくはこれ以上小さくならないで欲しい、といった場合に指定します。

div {
  height: 100vh;
  min-height: 500px;
}

上記では、画面いっぱいの高さが指定されていますが、画面の高さが500pxに満たなかった場合にも500pxは保持するように指定されています。

まとめ：CSSを学ぶ上でheightは必須知識

今回はCSSプロパティのheightについて、特徴や使い方について解説してきました。

heightのリセット方法や最大値・最小値についても紹介しましたね。

CSSにおいてheightは基本的な指定なので、必ず覚えておきましょう。

今回の記事が参考になれば幸いです。