CSSにおけるvwとvhの単位

単位vwとvhは、ブラウザウィンドウのビューポート領域を基準にサイズを指定することができます。例を見てみましょう。

以下のようなdiv要素があるとします：

html<div></div>

このdivの幅をビューポート幅の半分、高さをビューポート高さの半分に設定してみましょう：

cssdiv {
  width: 50vw;
  height: 50vh;
  margin: 30px auto;
  border: 1px solid red;
}

結果を見てみましょう：