CSSのvh/vwとは

htmlとcssを勉強している中で気になった単位”vh”と”vw”について備忘録として残しておきます。

vh/vwとは

それぞれ下記の略だそうです。

vh：Viewport Height
vw：Viewport Width

Viewportの高さを基準にした単位であり、50vhならViewportの高さの50%にあたります。
50vwならViewportの幅の50%にあたります。

Viewportとはブラウザの表示領域のことです。

以下のイメージで赤枠がViewportの領域、青がvh、緑がvwを指します。

実際に試してみる

簡単に以下のようなHTMLとCSSを書いてみました。
※他の記述は省略

<div class="container">
    <div class="area1"></div>
    <div class="area2"></div>
    <div class="area3"></div>
    <div class="area4"></div>
    <div class="area5"></div>
</div>

.area1{
    background-color: #b3ddb9;
    height: 100vh;
}
.area2{
    background-color: #ddbbb3;
    height: 100vh;
}
.area3{
    background-color: #e0e9ab;
    height: 100vh;
}
.area4{
    background-color: #b3ddb9;
    height: 100vh;
}
.area5{
    background-color: #b3ddb9;
    height: 100vh;
}

実際の画面はこんな感じです。

少しスクロールすると、高さを100vhで指定しているのですぐに次の背景が出てきました。

何もheightやwidthに限った話ではないと思いますが、heightにvwをwidthにvhといった指定もできる模様。
ウィンドウサイズの高さと幅を調整する際にそれぞれ逆転して伸び縮みするので実際にそんな使い方をすることがあるのか…

.area1{
    background-color: #b3ddb9;
    height: 100vw;
    width: 100vh;
}