CSS3のビューポート単位：vw、vh、vmin、vmaxの解説

CSSで要素の高さや幅を指定する際はpxや%といった単位を使うのが一般的ですが、本文はビューポートの単位を紹介します。

ビューポート単位

まず、ビューポート単位とは、ビューポート（Viewport）というブラウザの表示領域のサイズに基づいた相対単位です。

ビューポートのサイズに応じて、要素のサイズや位置を自動的に調整することができます。

ビューポート単位には、以下の4つがあります。

`vw`	viewport width	ビューポートの幅に対する割合（%）
`vh`	viewport height	ビューポートの高さに対する割合（%）
`vmin`	viewport minimum	ビューポートの幅と高さのうち、値が小さい方に対する割合（%）
`vmax`	viewport max	ビューポートの幅と高さのうち、値が大きい方に対する割合（%）

vwとvhは、ビューポートの幅/高さを1単位とした相対単位です。

例えば、width: 50vwと書くと、要素の幅がビューポートの幅の50%になります。

以下は、vwを使用した例です。

.div-01 {
  width: 50vw;
}

例えば、あるスマホのビューポート幅をピクセルで表すと400pxです。

あるdivの幅は50vwです。

50vwは50/100ということで、200pxがこのdivの幅となります。

vminは、Viewportの幅と高さのうち、小さい方を1単位とした相対単位です。

例えば、font-size: 2vminと書くと、フォントサイズがViewportの幅と高さのうち、小さい方の2%になります。

vmaxは、Viewportの幅と高さのうち、大きい方を1単位とした相対単位です。

例えば、line-height: 3vmaxと書くと、行の高さがViewportの幅と高さのうち、大きい方の3%になります。

.example {
  font-size: 2vmin;
  line-height: 3vmax;
}

これらの単位は、Viewportのサイズに依存するため、画面サイズが変わると要素のサイズも変わってしまうことがあります。

幅100vwは、Viewportの幅に対して100%という意味で、Viewportの幅いっぱいに要素を広げることができます。

一方、幅100%は、親要素の幅に対して100%という意味で、親要素の幅いっぱいに要素を広げることができます。

例えば、以下のHTMLコードを考えてみましょう。

<div class="container">
  <div class="box"></div>
</div>

この場合、.containerは親要素、.boxは子要素となります。

幅100%を指定する場合、.boxのCSSは以下のようになります。

.box {
  width: 100%;
}

この場合、.boxは.containerの幅いっぱいに広がります。

幅100vwを指定する場合、.boxのCSSは以下のようになります。

.box {
  width: 100vw;
}

この場合、.boxはViewportの幅いっぱいに広がります。

つまり、パーセントで定義された要素のサイズは親要素に基づくため、要素をページの幅や高さをいっぱいにする時は、パーセントよりビューポートの単位が適しています。

いくつかの応用例を紹介します。

ヘッダーやフッターなど、サイト上部や下部に配置する要素の高さを、Viewportの高さを基準にして指定することができます。

header {
  height: 70vh;
}

footer {
  height: 20vh;
}

以下のようにbackground-sizeプロパティに100vwと100vhを指定することで、Viewportいっぱいに背景画像を表示することができます。

body {
  background-image: url('画像のURL');
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
}

お役に立てましたら幸いです。ご不明点やご質問がございましたら、お気軽にコメント欄よりお問い合わせください。