CSS3からvw, vh, vmin, vmaxが追加されました。
新しい相対値（倍率）指定ですが、%との違いが分からない人もいると思います。
また、どこで使うのか分からない人のために、ソースコードのサンプルを入れながら、かんたんに分かりやすく説明します。
絶対値指定のpx、相対値（倍率）指定の%
px（ピクセル）は、PC, タブレット, スマホの画面の単位です。
値を指定すると確実にそのサイズで表示されます。
一方、%は親の要素のサイズに影響されます。『親の要素の○○%』という指定をするから。
vw, vh, vmin, vmaxは、%指定がグレードアップしたもの
vw, vh, vmin, vmaxは、CSS3から導入された新しい相対値指定の単位です。
これらの基準はビューポート（viewport）で、
ブラウザでWebページが表示されている全体のサイズ。
ブラウザのメニューとかはサイズに入りません。ページを表示する部分だけです。
タブレットやスマホなら、ほぼ端末のサイズになります。表にまとめました。
| 単位 | 意味 |
|---|---|
| vw | viewport width ビューポートの幅を基準にした相対サイズ 。 |
| vh | viewport height ビューポートの高さを基準にした相対サイズ。 |
| vmin | viewport min ビューポートの幅と高さで小さい方を基準にした相対サイズ。 |
| vmax | viewport max ビューポートの幅と高さで大きい方を基準にした相対サイズ。 |
ビューポートと同じサイズは100です。10vwはスマホの幅が320pxなら、1/10の32px。
ブラウザの表示領域（端末）サイズの数%を指定するということですね？
なぜ、表示領域サイズの基準が必要になったのか？
なぜ、%だけではダメだったのでしょうか？ これにはレスポンシブデザインが関係しています。
近年は、PC, タブレット, スマホなど、サイズの違う端末（デバイス）で同じWebページを見ることが当たり前です。
%の指定では親の要素が影響するので、HTMLタブの階層が多くなると、どれが基準なのか分からなくなっていました。
またサイズの違う端末で、それぞれバランスの良い配置・サイズのデザインをひとつのCSSファイルで作れることが必要でした。
スマホやタブレットは、端末の画面いっぱいに表示します。
表示領域のサイズからコンテンツのサイズを決めると、端末に合ったバランスの取れた配置・デザインができます。
そこから表示領域を基準にした単位が作られました。
CSS3以前にスマホはすでに普及していました。
そこで開発者たちは、同じHTML, CSSでPCとスマホを表示させるのをあきらめて、PC用ページ、SP（タブレット・スマホ）用ページの2つを用意していました。
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なら、ブラウザのウィンドウサイズを変えると確認ができます。
vmaxを使うときは注意が必要です。
端末の長いほうが基準になるので、コンテンツがはみ出ることがあります。width: **vh, height: **vwを指定するときも同じです。
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サイトを見る端末（デバイス）のサイズが多様になったからです。
そのためにレスポンシブデザインが必要になり、それを実現するために使いやすい単位が増えました。
これらの単位が、基準値からの相対値（倍率）なところにも、レスポンシブデザインを意識していることが分かります。
レスポンシブ対応は、今のWebサイトでは必須なので、以前のようなpxなどの絶対値指定をむやみに使うのはやめるべきです。
まず先に相対値指定を考えるべきでしょう。
そして、相対値指定の中でも、vw, vhなどのレスポンシブデザイン用に用意された単位を、%よりも優先して使いましょう。
