レスポンシブデザインを考慮したビューポートの単位の使い分け方(vw,%など)

今回はレスポンシブデザインでも役立つ、vwや%など、CSSのビューポートの単位の使い分け方について紹介します。

CSSではvw,vh,vmin,vmaxなど、比較的新しい単位が用意されました。これらはビューポートの大きさによって変化するので、レスポンシブデザインにはもってこいです。

 

ビューポートの単位とは?

ビューポートの単位はビューポートの大きさによって相対的に決まる単位です。

ビューポートと関係がある単位は以下の4つです。

  • vw:ビューポートの幅の100分の1
  • vh:ビューポートの高さの100分の1
  • vmin:ビューポートの幅か高さのどちらか値が小さい方の100分の1
  • vmax:ビューポートの幅か高さのどちらか値が大きい方の100分の1

 

4つのうち特に使い勝手がいいのはvwとvhです。

また、ビューポートの単位はパーセントを使った単位と似ていますが、それぞれ使い分けは当然必要です。

幅を扱う時は%、高さを扱う時はvhの方がより良いでしょう。

 

要素を幅いっぱいに指定

vwはビューポートの幅によって相対的に大きさが決まります。

注意するのはビューポートの幅はブラウザのスクロールバーを含んだサイズで計算されるということです。

HTMLの<body>も<html>も実際はスクロールバーを含んでいない値になっています。ビューポートの幅は違うので気をつけましょう。

よってビューポートはHTMLの要素の幅よりも大きくなっています。

ビューポート>html>body

 

要素を100vwと指定するとその要素は<html><body>よりも大きいサイズになってしまうので、ビューポート要素で指定するよりはパーセントで指定する方がいいでしょう。

 

要素を高さいっぱいに指定

要素を高さいっぱいに表示する場合はパーセントよりもビューポートの単位であるvhの方がより適していると言えます。

パーセントで指定する場合は要素のサイズが親要素によって決まるため、親要素の高さが決まっている必要があります。

しかしvhを使うと、要素をどこに配置してもビューポートと比較することで要素の大きさが決まります。

vhもvwと同じくスクロールバーの影響を受けますが、ほとんどのページに横スクロールはないので無視していいでしょう。

.example {
  height: 100vh;
}

 

vhの使い方

vhが特に効果を発揮する使い方は、デバイスのサイズにかかわらずスクリーンの幅と高さいっぱいに背景画像を使用したい場合です。

vhを使うとビューポートによって高さが決まるので画像の高さを保ちつつ、比率は崩さずに表示することができます。

.bg {
position: relative;
background: url('bg.jpg') center/cover;
width: 100%;
height: 100vh;
}

 

また、フルスクリーンのページを作りたい時もvhが便利です。

ビューポートの幅と高さいっぱいに表示させることも簡単に可能です。

section {
width: 100%;
height: 100vh;
}

 

JavaScriptを使えばページをパラパラめくるようなページを作ることもできます。

$('nav').on('click', function() {

  if ( $(this).hasClass('down') ) {
    var movePos = $(window).scrollTop() + $(window).height();
  }
  if ( $(this).hasClass('up') ) {
    var movePos = $(window).scrollTop() - $(window).height();
  }

  $('html, body').animate({
    scrollTop: movePos
  }, 1000);
});

 

vhは画像のサイズを最適化するのにも使えます。

例えば画像をスクリーンの大きさにかかわらず、常に全て見える状態にしておくこともできます。

img {
  width: auto; 
  max-width: 100%; 
  max-height: 90vh; 

  margin: 2rem auto;
}

 

ブラウザサポート

ビューポートの単位はCSSの中でも結構新しい単位なので、古いブラウザだとバグが起きる可能性があります。

ただし、古いブラウザでもビューポート単位を使えるようにする方法はあります。

以下にその原因と対処法をまとめておくので、古いブラウザでも使用する機会があったら参考にしてみてください。

iOS Safari 7.1: vhでバグが発生しやすい。対処法は VH and VW units can cause issues on iOS devicesを参考。

Opera Mini 8, IE 8: サポート対象外。 pburtchaellの解決方法があります→VH and VW units can cause issues on iOS devices

IE 9: vminは使用せずにvmをサポートしている。対処法としては、指定するときにvminとvmの両方の単位を同時に指定すること。

IE 10-Edge: vmaxはサポート対象外。 pburtchaellの解決方法があります。→VH and VW units can cause issues on iOS devices