2025/12/01

CSSの新しい単位svh, dvhとは？スマホ画面の高さを最適化する新常識

Webサイト制作で、画面いっぱいに要素を表示させたい時、height: 100vh; を使いますよね。
しかし、スマートフォンのブラウザで表示すると、アドレスバーのせいで要素がはみ出したり、下に余分なスクロールが生まれたりした経験はありませんか？
この長年の悩みを解決する、CSSの新しい単位 `svh`, `lvh`, `dvh` が登場しました。
この記事では、これらの単位を徹底解説し、スマホのビューポート問題を解決する「新常識」をマスターします。

なぜ `height: 100vh` ではダメなのか？スマホのビューポート問題

問題の核心は、スマートフォンのブラウザにおける「ビューポート（表示領域）」の高さが固定ではない点にあります。
ページを下にスクロールするとアドレスバーやツールバーが非表示になり、その分ビューポートの高さが動的に変化します。

しかし、vh (Viewport Height) という単位は、このUIが表示されている状態（ビューポートが最も大きい状態）の高さを基準にしてしまうことが多いのです。
そのため、以下のような問題が発生します。

アドレスバーが表示されている初期表示時、height: 100vh の要素が画面内に収まらず、下部が切れてしまう。
結果として、コンテンツが画面内に収まっているにもかかわらず、不必要な縦スクロールが発生する。

この挙動の違いが、多くのWeb制作者を悩ませてきた原因でした。

スマートフォンの表示領域の高さが異なる様子 — アドレスバーが表示されている時とそうでない時で表示領域の高さが変化してしまう

救世主！新しいビューポート単位 `svh`, `lvh`, `dvh` を徹底解説

この問題を解決するために、ビューポートの高さをより正確に扱うための3つの新しい単位が定義されました。
それぞれの違いをしっかり理解しましょう。

`svh` (Small Viewport Height)

アドレスバーやツールバーなどのUIが表示されていて、ビューポートが最も小さい状態の高さを基準にした単位です。100svh を指定すれば、UIが表示されている状態でも要素が画面内にぴったり収まります。

`lvh` (Large Viewport Height)

アドレスバーなどが非表示になり、ビューポートが最も大きい状態の高さを基準にした単位です。従来の vh とほぼ同じ挙動になります。

`dvh` (Dynamic Viewport Height)

これが最も革新的な単位です。アドレスバーなどのUIの表示・非表示に応じて、ビューポートの高さが動的に変化します。100dvh を指定すると、常に実際の表示領域の高さに追従して要素の高さが自動で調整されます。

実践！`dvh` を使ったサンプルコード

では、実際にファーストビューのヒーローセクションを画面いっぱいに表示させる例を見てみましょう。

旧来の方法（問題あり）

CSS
.hero-section-old {
  height: 100vh; /* スマホのアドレスバー表示時に下が見切れる */
  background-color: #ffcccc;
}

`dvh` を使った解決策

CSS

.hero-section-new { /* これだけでOK！アドレスバーの有無に応じて高さが自動調整される */ height: 100dvh; background-color: #ccffcc; }

このように、vh を dvh に置き換えるだけで、長年の問題だったスマホでの高さのズレを簡単に解決できます。

`svh`, `lvh`, `dvh` の使い分け

基本的には `dvh` を使うのが最も汎用的で安全ですが、ケースによっては他の単位が適している場合もあります。

`dvh` を使うべきケース:
ファーストビューのヒーローヘッダー、モーダルウィンドウなど、常に画面の高さいっぱいに表示したい要素。ほとんどのケースでこれが最適解です。
`svh` を使うべきケース:
要素の高さが動的に変わるとレイアウトが崩れる可能性がある場合。常にUIが表示された状態を基準に高さを固定したい時に使用します。
`lvh` を使うべきケース:
UIが非表示になった状態でピッタリに合わせたい、特定のデザイン要件がある場合。使用頻度は比較的低いかもしれません。

対応ブラウザ状況

気になるブラウザの対応状況ですが、2025年現在、ほぼ全ての主要なモダンブラウザ（Chrome, Firefox, Safari, Edge）でサポートされています。 そのため、今すぐ実務で安心して使うことができます。

・Can I useによるスモール(sv)、ラージ(lv)、ダイナミック(dv)ビューポートのサポート状況

古いブラウザのサポートが必要な場合は、フォールバックとして従来の vh を併記しておくと良いでしょう。

CSS
.element {
  height: 100vh; /* フォールバック */
  height: 100dvh;
}

まとめ：`dvh` を使いこなし、スマホのレイアウトを最適化しよう

今回は、CSSの新しいビューポート単位 `svh`, `lvh`, `dvh` について解説しました。

`100vh` はスマホのアドレスバーでずれる問題があった。
`svh` は最小、`lvh` は最大、`dvh` は動的なビューポートの高さを参照する。
画面いっぱいの要素には height: 100dvh; を使うのが現代のベストプラクティス。

これらの新しい単位は、もはや特別な技術ではなく、これからのWeb制作における「新常識」です。
特に dvh は多くのレイアウト問題を解決する強力な武器になります。
ぜひ今日のコーディングから取り入れて、ユーザーにとって快適なサイト制作に役立ててください。

[参考ページ]
ビューポートに基づく相対的な長さの単位 – CSS: カスケーディングスタイルシート | MDN

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。