svh・dvh・lvhとは？vhとの違いと使い分け

CSSには、画面の高さを基準にサイズを指定するvhという単位があります。

しかし、スマートフォンではブラウザのアドレスバーなどの表示・非表示によって、実際にコンテンツを表示できる高さが変化するため、100vhだけでは意図した表示にならない場合があります。
そこで登場したのが、svh・dvh・lvhというビューポート単位です。

svh・dvh・lvhとは？

svh・dvh・lvhは、ブラウザのビューポート（表示領域）の高さを基準にサイズを指定するCSSの単位です。

それぞれ以下の意味があります。

• svh：Small Viewport Height
• dvh：Dynamic Viewport Height
• lvh：Large Viewport Height

いずれも「ビューポートの高さに対する割合」を表します。

例えば、100dvhと指定すると、dvhを基準としたビューポートの高さ100％を指定できます。

svh・dvh・lvhの違い

3つの単位の大きな違いは、ブラウザのUIなどによってビューポートの高さが変化した場合、どの高さを基準にするかという点です。

svh（Small Viewport Height）

svhは、Small Viewport Heightの略です。

ブラウザのUIが表示されるなど、ビューポートが小さくなった場合を想定したサイズを基準とします。

例えば、height: 100svh; とすると、小さいビューポートの高さ100％になります。

そのため、ブラウザのUIが表示されている状態でも、要素が画面からはみ出しにくいという特徴があります。

「ブラウザUIが表示されている状態でも、要素を画面内に収めやすくしたい」という場合に適しています。

lvh（Large Viewport Height）

lvhは、Large Viewport Heightの略です。

ブラウザのUIが縮小・非表示になった場合などを想定した、大きいビューポートサイズを基準とします。

例えば、height: 100lvh; とすると、大きいビューポートの高さ100％になります。

最大の表示領域を基準にしてサイズを決めたい場合に使用できます。

dvh（Dynamic Viewport Height）

dvhは、Dynamic Viewport Heightの略です。

ブラウザのUIの表示・非表示などによって変化する、その時点のビューポートの高さを基準とします。

例えば、height: 100dvh; とすると、現在のビューポートの高さ100％になります。

スクロールなどによってブラウザのUIが変化すると、dvhの値も変化します。
そのため、スクロール中に要素の高さが変化し、レイアウトが動く場合があります。

比較表

単位	基準となる高さ	特徴
svh	小さいビューポート	UIが表示されても収まりやすい
dvh	動的なビューポート	現在の表示領域に応じて変化
lvh	大きいビューポート	UIが非表示になった状態を基準
vh	lvhと同等	lvhと同等

svh・dvh・lvhとvhの違い

vh は現在の仕様では lvh と同等です。

一方、svh・dvh・lvhでは、スマートフォンのブラウザUIによってビューポートの高さが変化することを考慮して、基準となる高さを明確に指定できます。

特にスマートフォンでは、アドレスバーなどのブラウザUIが表示されたり非表示になったりするため、100vhでは意図した高さにならないケースがあります。

そのような場合に、svh・dvh・lvhを使い分けることで、より意図したレイアウトを作りやすくなります。

svh・dvh・lvhはどう使い分ける？

用途に応じて、以下のように使い分けると分かりやすいでしょう。

画面内に収めやすくしたい場合はsvh

ブラウザUIが表示されている状態でも、コンテンツを画面内に収めたい場合はsvhが適しています。

.hero {
  min-height: 100svh;
}

ファーストビューなど、「画面からはみ出さないこと」を優先したい場合に利用できます。

現在表示されている領域に合わせたい場合はdvh

現在のビューポートの高さに合わせて要素の高さを変化させたい場合はdvhを使用します。

.hero {
  min-height: 100dvh;
}

スマートフォンでブラウザUIの表示・非表示に合わせて、高さを動的に調整したい場合に便利です。

最大の表示領域を基準にしたい場合はlvh

ビューポートが最大になった状態を基準にしたい場合はlvhを使用します。

.hero {
  min-height: 100lvh;
}

ただし、スマートフォンでブラウザUIが表示されている状態では、要素が画面からはみ出す可能性があるため、用途には注意が必要です。

実際のCSSでの使い方

svh・dvh・lvhは、heightやmin-heightなどの値に指定して使用します。

例えば、ファーストビューを現在のビューポートの高さに合わせたい場合は、dvhを使用します。

.hero {
  min-height: 100dvh;
}

スマートフォンでは、ブラウザUIの表示・非表示によってビューポートの高さが変化するため、dvhを使用すると、その時点の表示領域に合わせて要素の高さを調整できます。

一方、ブラウザUIが表示されている状態でも、要素を画面内に収めやすくしたい場合は、svhを使用します。

.hero {
  min-height: 100svh;
}

また、ブラウザの対応状況を考慮して、従来のvhをフォールバックとして指定することもできます。

.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

このように同じプロパティを2回指定すると、dvhに対応している環境では後に記述した100dvhが使用され、対応していない環境では100vhが使用されます。

なお、現在の主要ブラウザではvhはlvhと同等として扱われます。
そのため、最大のビューポートを基準にしたい場合は、lvhを直接指定することもできます。

.hero {
  min-height: 100lvh;
}

このように、単に「画面いっぱいにする」という目的でも、どの状態のビューポートを基準にしたいかによって、使用する単位が変わります。

まとめ

svh・dvh・lvhは、いずれもビューポートの高さを基準にするCSSの単位ですが、基準となる高さが異なります。

• svh：小さいビューポートを基準にする。要素を画面内に収めやすくしたい場合に適している
• dvh：現在のビューポートを基準にする。表示領域に合わせて要素の高さを変化させたい場合に適している
• lvh：大きいビューポートを基準にする。最大の表示領域を基準にしたい場合に適している

特にスマートフォンではブラウザUIによって表示領域が変化するため、従来のvhだけでは対応しにくいケースがあります。
目的に応じて使い分けるとよいでしょう。