CSSでビューポートの高さと幅を設定する方法｜vh・vw単位の使い方を解説

CSSでは、vh（viewport height）とvw（viewport width）という単位を使うことで、ブラウザの表示ブラウザの表示領域（ビューポート）の高さや幅を基準にしたサイズ指定ができます。画面サイズに応じて柔軟にレイアウトを調整したい場合に非常に便利な機能です。

ビューポート単位とは

ビューポートとは、ブラウザ上でWebページが実際に表示される領域のことです。それぞれの単位の意味は以下のとおりです。

• 1vh ＝ ビューポートの高さの1%
• 1vw ＝ ビューポートの幅の1%

ビューポートの高さ（vh）を設定する方法

高さを基準にサイズを指定する場合は vh を使用します。たとえば、見出しのフォントサイズをビューポートの高さの4%に設定するには、次のように記述します。

h1 {
    font-size: 4.0vh;
}

この場合、画面の高さが800pxであれば、フォントサイズは32px（800px × 0.04）として表示されます。

ビューポートの幅（vw）を設定する方法

幅を基準にサイズを指定する場合は vw を使用します。見出しのフォントサイズをビューポートの幅の5.5%に設定する例がこちらです。

h1 {
    font-size: 5.5vw;
}

この場合、画面の幅が1200pxであれば、フォントサイズは66px（1200px × 0.055）になります。

その他のビューポート単位

vh・vw以外にも、用途に応じて使えるビューポート単位が用意されています。

• vmin：ビューポートの幅と高さのうち、小さい方を基準とする単位
• vmax：ビューポートの幅と高さのうち、大きい方を基準とする単位

使用時の注意点

モバイル端末では、アドレスバーの表示・非表示によってビューポートの高さが変動することがあります。そのため、vh を使った全画面レイアウトでは、意図しないスクロールが発生するケースがあります。近年のブラウザでは、この問題に対応するため dvh（動的ビューポートの高さ）や svh・lvh といった新しい単位も利用可能です。

ビューポート単位を活用すれば、メディアクエリに頼らなくても、デバイスごとの画面サイズに自動的に対応するレスポンシブなデザインを手軽に実現できます。