CSS3 : 画面サイズで相対指定できる「vh」と「vw」

まずはサンプルから。

See the Pen Full window contents by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

Box1〜3と書かれた3つの<section>で構成しています。

この<section>には以下のように縦幅が設定されています。

section {
  // vh,vw使ってるところだけ抜粋
  height: 100vh; // 100vh = ウィンドウの縦幅100%
  font-size: 2vw; // 2vw = ウィンドウの横幅2%
}

「vh」は表示しているウィンドウサイズの縦幅の割合で、「vw」は横幅の割合で、相対的・動的に値が変わる指定方法です。

「height: 100%」に近そうに思えますが、この指定はウィンドウサイズでなく親要素のサイズが基準になるのと、またCSSを扱っている人なら分かると思いますがCSS2時代の縦幅指定は不安定です。

vh、vwを使った指定は問答無用でウィンドウ基準のサイズになります。近ごろ見る画面全体にフィットするWebデザインはこの値が使われています。

レスポンシブレイアウトとの親和性も高く、使い方には慣れがいりますが利用価値の高い要素です。