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

9 years ago

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

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

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

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

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

About

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

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

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 や % 指定していた箇所を vw ｙ vh に変えるだけです.

下記のように指定すれば

.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 ~

phi

phiaryjust a creator