SoyaBlog

これを見れば解決しそうや

HOME>CSS>要素の高さを設定するheightについて解説
ブログ投稿日時:
ブログ更新日時:
要素の高さを設定するheightについて解説

要素の高さを設定するheightについて解説

  1. heightとは
  2. heightの指定方法
  3. 今回のまとめ

1.height とは

height とは、要素の高さを設定するプロパティです。

2.height の指定方法

height を指定するときは主に px、%、vh のどれかを使って指定します。

heightをpxで指定

height を px で指定したときは、ブラウザの画面幅を変更しても高さを固定で保ちます。

それでは指定方法と実際の表示を見ていきましょう。

<div class="height-px"></div>
.height-px {
 width: 100%;
 height: 400px;
 background-color: red;
}
HTMLとCSSの表示

上記のように height を px で指定したので高さは400pxになります。

px で指定した高さは固定になるので、ブラウザの画面幅を変更しても、指定した高さが固定で変わらないことを確認してみてください。

heightを%で指定

height を % で指定したときは、親要素の高さを基準にして相対的に高さが決まります。

それでは指定方法と実際の表示を見ていきましょう。

<div class="height-parent">
 <div class="child-class"></div>
</div>
.height-parent {
 width: 100%;
 height: 400px;
 background-color: red;
}

.child-class {
 width: 100%;
 height: 50%;
 background-color: blue;
}
HTMLとCSSの表示

上記の表示のように height を % で指定したときは親要素の高さを基準にして相対的に高さが決まります。

今回は height: 400px; の赤背景に対して height: 50%; の青背景の指定しています。

こちらもブラウザの高さを変更しても50%の青背景の高さが相対的に保たれるところを確認してみてください。

heightをvhで指定

height を vh で指定したときは、ブラウザの高さを基準にして相対的に高さが決まります。

それでは指定方法と実際の表示を見ていきましょう。

<div class="height-vh"></div>
.height-vh {
 width: 100%;
 height: 20vh;
 background-color: red;
}
HTMLとCSSの表示

上記の表示のように height を vh で指定したときはブラウザの高さを基準にして相対的に高さが決まります。

今回は height: 20vh; を指定しているのでブラウザの高さが1000pxの時は赤背景の高さは200pxになります。

こちらもブラウザの高さを変更して20vhの高さが相対的に保たれるところを確認してみてください。

3.今回のまとめ

この記事では height について解説しました。

height とは、要素の高さを設定するプロパティです。

height を指定するときは主に px、%、vh のどれかを使って指定します。

それぞれの内容を理解して使い分けていきましょう。

最後までお読みいただきありがとうございます。