かんたんCSS3 vw, vh, vmin, vmax, 端末サイズ単位の使い方

CSS3からvw, vh, vmin, vmaxが追加されました。

新しい相対値（倍率）指定ですが、%との違いが分からない人もいると思います。

また、どこで使うのか分からない人のために、ソースコードのサンプルを入れながら、かんたんに分かりやすく説明します。

絶対値指定のpx、相対値（倍率）指定の%

px（ピクセル）は、PC, タブレット, スマホの画面の単位です。

値を指定すると確実にそのサイズで表示されます。

一方、%は親の要素のサイズに影響されます。『親の要素の○○%』という指定をするから。

vw, vh, vmin, vmaxは、%指定がグレードアップしたもの

vw, vh, vmin, vmaxは、CSS3から導入された新しい相対値指定の単位です。

初心者でも分かる解説。CSSってなんだ？ CSS3とは？

tadtadya.com

これらの基準はビューポート（viewport）で、

ブラウザのメニューとかはサイズに入りません。ページを表示する部分だけです。

タブレットやスマホなら、ほぼ端末のサイズになります。表にまとめました。

ビューポートと同じサイズは100です。10vwはスマホの幅が320pxなら、1/10の32px。

ブラウザの表示領域（端末）サイズの数%を指定するということですね？

なぜ、表示領域サイズの基準が必要になったのか？

なぜ、%だけではダメだったのでしょうか？ これにはレスポンシブデザインが関係しています。

近年は、PC, タブレット, スマホなど、サイズの違う端末（デバイス）で同じWebページを見ることが当たり前です。

%の指定では親の要素が影響するので、HTMLタブの階層が多くなると、どれが基準なのか分からなくなっていました。

またサイズの違う端末で、それぞれバランスの良い配置・サイズのデザインをひとつのCSSファイルで作れることが必要でした。

スマホやタブレットは、端末の画面いっぱいに表示します。

表示領域のサイズからコンテンツのサイズを決めると、端末に合ったバランスの取れた配置・デザインができます。

そこから表示領域を基準にした単位が作られました。

vw, vh, vmin, vmaxのサンプルコード

vw, vh, vmin, vmaxのサンプルコードを見てみましょう。

<div>vw</div>
<div class="content content-a">A auto</div>
<div class="content content-b vw-50">B 50vw</div>
<div class="content content-c vw-25">C 25vw</div>
<hr />
<div>vh</div>
<div class="content content-a">A auto</div>
<div class="content content-b vh-50">B 50vh</div>
<div class="content content-c vh-25">C 25vh</div>
<hr />
<div>vmin</div>
<div class="content content-a">A auto</div>
<div class="content content-b vmin-50">B 50vmin</div>
<div class="content content-c vmin-25">C 25vmin</div>
<hr />
<div>vmax</div>
<div class="content content-a">A auto</div>
<div class="content content-b vmax-50">B 50vw</div>
<div class="content content-c vmax-25">C 25vw</div>

幅をそれぞれ基準値に対して、auto(100%), 50%, 25%指定します。

.content {
    color: #fff;
    text-align: center;
}
.content-a {
    background: #7fc2ef;
}
.content-b {
    background: #d685b0;
}
.content-c {
    background: #dbe159;
}
.vw-50 {
    width: 50vw;
}
.vw-25 {
    width: 25vw;
}
.vh-50 {
    width: 50vh;
}
.vh-25 {
    width: 25vh;
}
.vmin-50 {
    width: 50vmin;
}
.vmin-25 {
    width: 25vmin;
}
.vmax-50 {
    width: 50vmax;
}
.vmax-25 {
    width: 25vmax;
}

結果が見やすいように色をつけて、幅のサイズを変えるクラスを追加しました。

HTMLの結果です。

スマホやタブレットなら、タテ・ヨコ動かしながら見てください。幅と高さが切り替わるので、50*, 25*の長さが変わります。

PCなら、ブラウザのウィンドウサイズを変えると確認ができます。

vw, vh, vmin, vmaxの使い方

vw, vh, vmin, vmaxの使いどころは『大きいサイズのコンテンツ』です。

など。画面いっぱいに広げるようなものです。サンプルコードを見てみましょう。

CSSに次のものを追加して、HTMLを変更します。

.img {
    width: 50vw;
    height: calc(50vw * (3/4));
    margin: 20px;
}
.movie {
    width: 50vmax;
    height: calc(50vmax * (9/16));
    margin: 20px;
}

<div class="content content-a img">image sample</div>
<div class="content content-b movie">movie sample</div>

サンプルなのでdivを使います。画像・動画でも方法は同じです。

HTMLの結果です。

端末を動かしたりブラウザのウィンドウサイズを変えると、サンプルのサイズが変わります。

まとめ

vw, vhなど、サイズ指定の単位が増えたのは、Webサイトを見る端末（デバイス）のサイズが多様になったからです。

そのためにレスポンシブデザインが必要になり、それを実現するために使いやすい単位が増えました。

かんたんCSS em,rem: フォントサイズ単位の使い方

tadtadya.com

これらの単位が、基準値からの相対値（倍率）なところにも、レスポンシブデザインを意識していることが分かります。

レスポンシブ対応は、今のWebサイトでは必須なので、以前のようなpxなどの絶対値指定をむやみに使うのはやめるべきです。

まず先に相対値指定を考えるべきでしょう。

そして、相対値指定の中でも、vw, vhなどのレスポンシブデザイン用に用意された単位を、%よりも優先して使いましょう。