[CSS3] px や % はもう古い? Viewport unitsという新たな単位『vw』,『vh』の使い方

phi phi on css

CSS で幅や高さを指定する際, px や % を使って指定するのが一般的かと思います.

ただ, この指定方法だと親要素に幅, 高さに左右されちゃったり, 縦幅に合わせて横幅を変えたいといった場合に困ってしまいます.

それらを解決してくれるのが今回紹介する Viewport units『vw』『vh』『vmax』『vmin』です!!

幾つか実例も作ったのでよかったら動かしながら遊んでみてください♪

※ 今更かよってツッコミを受けちゃいそうですが, 1年以上前の下書き放出中なのでご勘弁を...

About

Viewport units とは, ビューポート, つまり画面の幅, 高さに対して指定できる単位のことです.

下記のように4種類あります.

name full name description
vw Viewport Width ビューポートの幅に対する1/100の単位
vh Viewport Height ビューポートの高さに対する1/100の単位
vmin Viewport Minimum ビューポートの幅と高さのうち, 小さい方の値に対する1/100の単位
vmax Viewport Maximum ビューポートの幅と高さのうち, 大きい方の値に対する1/100の単位

Demo

デモです. 最初に表示されている要素もスクロール後に出てくる要素も width: ビューポートの幅の半分, height: ビューポートの高さ になっているのが分かるかと思います.

Code

デモのコードです.

html

<body>  
  <div class='row'>
    <div class='item item1'>item1</div>
    <div class='item item2'>item2</div>
    <div class='item item3'>item3</div>
    <div class='item item4'>item4</div>
    <div class='item item5'>item5</div>
  </div>
</body>  

css

body {  
  margin: 0px;
}

.row::before, .row::after {
  clear: both;
  content: '';
  display: block;
}

.item {
  float: left;
  width: 50vw;
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  font-size: 4rem;
  color: white;
}

.item1 {
  background-color: red;
}
.item2 {
  background-color: orange;
}
.item3 {
  background-color: green;
}
.item4 {
  background-color: cyan;
}
.item5 {
  background-color: blue;
}

Usage

今まで px% 指定していた箇所を vwvh に変えるだけです.

下記のように指定すれば

.example {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  font-size: 4rem;
  color: white;
  background-color: blue;
}

画面いっぱいに表示される要素を定義することができます.

Examples

実例集です. わりと実用的なものもあるのでよかったら参考にしてください.

高さを確実に指定する

div に対して hegith:100% を指定しても反応しない!? なんて経験ありませんか??

大抵そんなときは

html, body {  
  height: 100%;
}

と親要素の高さを指定するのを忘れてるのが原因だったりします.

vh だと確実に指定できて便利です!!

body {  
  margin: 0px;
}
.item {
  width: 100vw;
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  font-size: 4rem;
  color: white;
  background-color: red;
}

こちらが動作サンプルになります -> http://goo.gl/ZADCRz

画面サイズに合わせて文字サイズを変更

font-size に vw や vh を指定することで画面サイズに
合わせてフォントサイズを変更することができます.

.item {
  font-size: 16vw;
}

今回の例は極端ですが, メディアクエリなどで制限をかければ 簡単にレスポンシブな文字サイズにできます!

こちらが動作サンプルになります -> http://goo.gl/WpIhpq

画面に合わせて縦横どちらも見える形で表示

width, height どちらにみ vmin を指定することで確実に画面ないに収まるように要素を表示することができます.

body {  
  margin: 0px;
}
.item {
  margin: auto;
  width: 100vmin;
  height: 100vmin;
  text-align: center;
  line-height: 100vmin;
  font-size: 4rem;
  color: white;
  background-color: red;
}

こちらが動作サンプルになります -> http://goo.gl/l6i7gF

calc と組み合わせて Sticky footer を作ろう

一番便利な用途はこれですかね. Sticky footer とは画面下部に固定した footer のことです. 画面の高さが小さいときは画面下部に固定して, 大きいときはちゃんと隠れてスクロールすると見えるようになる的なアレです.

bootstrap の Getting started にもデモとしてあったりしますね.

今まではちょっと複雑な CSS を指定する必要があったのですが, CSS3 から追加された calc と今回紹介した vh を使えば簡単に表現できます.

まずメインとなるコンテンツに対して下記のように css を指定します. 今回は footer の高さを 32px としています.

.container {
  min-height: calc(100vh - 32px);
}

そして footer には下記のように指定します.

footer {  
  height: 32px;
}

たったこれだけで Sticky footer を作ることが出来ます.

こちらが動作サンプルになります -> http://goo.gl/4Yc27T

Browser Support

Browser vw, vh vmin vmax
Chrome v20.0 ~ v20.0 ~ v26.0 ~
Safari v6.0 ~ v6.0 ~ v6.1 ~
Firefox v19.0 ~ v19.0 ~ v19.0 ~
Opera v15.0 ~ v15.0 ~ v15.0 ~
iOS Safari v6.0 ~ v6.1 ~ v7.0 ~
Android Brower v4.4 ~ v4.4 ~ v4.4 ~
Internet Explorer v9.0 ~ v9.0 ~ v11.0 ~

Reference