Web制作に携わってる我々が普段何気なく使っているvwやvhという単位ですが、初心者の方には使い所や「%」との違いなど分かりにくい部分もあると思ったので、自分の復習も兼ねて改めて解説してみたいと思います。

そもそも「vw」と「vh」って何？

「v」というのは「viewport」の略で、簡単に言うと画面のサイズです。

• vw = viewport width = 画面の横幅
• vh = viewport height = 画面の高さ

1vwは画面の横幅の1%に、1vhは画面の高さの1%に相当します。

例えば画面のサイズが「1200x800px」の場合…

• 100vw = 1200px
• 50vw = 600px
• 1vw = 12px
• 100vh = 800px
• 50vh = 400px
• 1vh = 8px

ピクセルに変換するとこんな感じになります。これさえ理解すればもうvw(vh)の8割は理解したと言っていいかも。

vwの挙動

それでは実際にvwの挙動を見てみましょう。

See the Pen vw_1 by Leo_8192 (@Leo_8192) on CodePen.

このように、画面の横幅に対して何%の横幅にするかを指定できるのがvwです。

ただ、これだけだと単位としての「%」との違いが分からないので、それぞれの比較を見てみましょう。

vwと%の違い

まずはこちらのサンプルをご覧ください。

See the Pen vw_1 by Leo_8192 (@Leo_8192) on CodePen.

このように、vwは常に画面全体の幅に対しての比率を指定できますが、%は親要素の大きさに影響を受けます。

vhの挙動

次にvhの挙動の確認です。

See the Pen vw_1 by Leo_8192 (@Leo_8192) on CodePen.

画面の高さに対しての割合で指定できていますね。

これも「%」との比較を見てみましょう。

vhと%の違い

See the Pen vh_1 by Leo_8192 (@Leo_8192) on CodePen.

はい、こちらもvwと同じく、%は親要素の影響を受けているのに対してvhは常に画面の高さに対しての指定が出来ています。

「vmax」と「vmin」について

vwとvhの挙動をマスターしたら、次はvmaxとvminを覚えてみましょう。

vmaxの解説

vmaxとは、画面の横幅と高さを比べて大きい方を基準とした割合を指定できます。

例えば画面のサイズが「1200x800px」の場合、横幅のほうが大きいので…

• 100vmax = 1200px
• 1vmax = 12px

このように、画面の横幅に対しての割合が得られます。

もし画面のサイズが縦長の「800x1200px」だった場合でも、高さのほうが大きいので…

• 100vmax = 1200px
• 1vmax = 12px

このように、今度は高さに対しての割合が得られるので結果は先程と同じになります。

vminの解説

vminとは、画面の横幅と高さを比べて小さい方を基準とした割合を指定できます。

例えば画面のサイズが「1200x800px」の場合、高さの方が小さいので…

• 100vmin = 800px
• 1vmin = 8px

このように、画面の高さに対しての割合が得られます。

もし画面のサイズが縦長の「800x1200px」だった場合でも、横幅のほうが小さいので…

• 100vmin = 800px
• 1vmin = 8px

このように、今度は横幅に対しての割合が得られるので結果は先程と同じになります。

vmax、vminの挙動

それではvmaxとvminの挙動を確認してみましょう。

See the Pen vw_1 by Leo_8192 (@Leo_8192) on CodePen.

PCから閲覧している方は、Codepenにアクセスしてブラウザのサイズをぐりぐり変えてみるとどういう計算がされているのか分かりやすいと思います。

最後に

以上、vw,vh,vmax,vminの解説でした。

実際の用途としては

• レスポンシブ対応したWebサイトの制作
• 画面全体を覆うようなメインビジュアルの実装
• スマートフォン用ページの横幅や余白の制御

などが考えられますが、他にも色々と使い道のある便利な単位なので、Web制作初心者の方も是非使い方をマスターしてください！