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

goto_jp 63views 更新:2016年8月26日

まずはサンプルから。

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デザインはこの値が使われています。

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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません