Web制作で知っておきたい SVH、DVH、LVH の違いと実務での使い方 htmlとcss-新潟のホームページ制作会社 (株)アテンド

ホームページ制作をしていると、「画面の高さ」をどう扱うかで悩むことがあります。

特にスマートフォンでは、ブラウザのアドレスバーやツールバーの表示・非表示によって、画面の高さが変化します。そのため、従来の vh 単位を使ってレイアウトを作ると、思った通りの表示にならないことがあります。
例えば、次のようなケースです。

・100vh を指定したのに画面からはみ出してしまう
・ファーストビューがきれいに収まらない
・スクロールしたときに余白ができる

こうしたモバイルブラウザ特有の問題を解決するために登場したのが、SVH・DVH・LVH という新しいビューポート単位です。

この記事では、Web制作の実務で役立つように、SVH・DVH・LVHの違いや使い分け方を分かりやすく解説します。

SVH・DVH・LVHとは？

SVH、DVH、LVHは、CSSで画面の高さを指定するための新しいビューポート単位です。
従来からある vh（Viewport Height）と似ていますが、スマートフォンのブラウザ特有の高さ変化に対応するために追加された単位になります。

スマートフォンでは、アドレスバーやツールバーの表示・非表示によって表示領域の高さが変わることがあります。その結果、従来の vh だけではレイアウトが崩れてしまうことがありました。

SVH・DVH・LVHは、この問題を解決するために導入された単位で、ブラウザの状態に応じた高さをより正確に扱えるようになっています。

SVH・DVH・LVHの違いをざっくり理解

SVH、DVH、LVHはどれも画面の高さを扱う単位ですが、それぞれ基準となる高さが異なります。

SVHは「Small Viewport Height」の略で、ビューポートの中で最も小さい高さを基準にします。
スマートフォンでは、アドレスバーやツールバーが表示されている状態が、画面の高さが最も小さい状態になります。そのためSVHは、こうした最小サイズを基準とした高さになります。

DVHは「Dynamic Viewport Height」の略で、現在の表示状態に応じて動的に変わる高さを基準にします。
スクロールによってブラウザのUIが表示されたり消えたりすると、その変化に合わせて高さも変わります。つまり、常に現在の画面サイズに合わせた高さになります。

LVHは「Large Viewport Height」の略で、ビューポートの中で最も大きい高さを基準にします。
スマートフォンでは、アドレスバーやツールバーがすべて隠れている状態が最大の高さになります。LVHは、この最大サイズを基準とした高さになります。

このように、SVHは最小高さ、DVHは現在の高さ、LVHは最大高さを基準にしている点が大きな違いです。

SVH（Small Viewport Height）

SVHは、ブラウザの表示状態の中で最も小さい高さを基準にする単位です。
スマートフォンでは、アドレスバーやツールバーが表示されると画面の高さが小さくなります。
SVHはその状態を基準にするため、レイアウトが画面からはみ出すことを防ぎやすくなります。
そのため、特に「画面に必ず収めたい要素」に向いている単位です。

例えば、ヒーローセクションやファーストビューなど、最初に表示される重要なエリアではSVHが役立ちます。最小サイズを基準にしているため、スマートフォンでもレイアウトが安定しやすく、ユーザーにとっても見やすい表示になります。

実務では、次のように指定することができます。

.hero {
  height: 100svh;
}

このように指定すると、画面の最小高さに合わせて要素が表示されるようになります。

DVH（Dynamic Viewport Height）

DVHは、現在の画面サイズに合わせて動的に高さが変わる単位です。
スマートフォンでは、スクロールするとアドレスバーが隠れることがあります。すると表示できる高さが広くなります。
DVHは、この変化に合わせて高さも自動的に変わります。
そのため、フルスクリーン表示やアプリ風のレイアウトを作るときに便利です。

例えば、画面いっぱいに表示するセクションを作る場合には、次のように指定します。

.fullscreen {
  height: 100dvh;
}

DVHを使うことで、ユーザーの操作によるブラウザUIの変化にも柔軟に対応できます。

以前は、この問題を解決するためにJavaScriptで画面高さを再計算する方法がよく使われていました。
しかしDVHを使えば、CSSだけで対応できるケースが増えています。

LVH（Large Viewport Height）

LVHは、ビューポートの中で最も大きい高さを基準にする単位です。
これは、スマートフォンでアドレスバーなどのブラウザUIがすべて隠れた状態の高さになります。つまり、端末で表示できる最大サイズの高さです。
LVHは、デザインの基準としてレイアウトを組みたい場合に使われることがあります。

例えば、デザインカンプの高さをそのまま再現したい場合や、ページ全体の構造を設計するときに役立つことがあります。

.section {
  height: 100lvh;
}

ただし、ブラウザUIが表示されている状態では高さが大きくなりすぎることもあるため、使う場面には注意が必要です。

従来のvhとの違い

従来の vh は、ビューポートの高さを基準にした単位です。
例えば、height: 100vh を指定すると、画面の高さと同じサイズになります。
しかしスマートフォンでは、ブラウザのUIによって高さが変わるため、次のような問題が発生することがあります。

・画面から要素がはみ出す
・スクロールすると余白ができる
・レイアウトが不安定になる

SVH・DVH・LVHは、こうした問題を解決するために追加された単位です。モバイル環境でも安定したレイアウトを実現できるようになっています。

実務での使い分けの考え方

実務でSVH・DVH・LVHを使うときは、どの高さを基準にしたいかを考えると分かりやすくなります。

レイアウトを安定させたい場合にはSVHが向いています。
最小サイズを基準にするため、スマートフォンでも画面からはみ出しにくくなります。

現在の画面サイズに合わせて表示したい場合にはDVHが便利です。
ユーザーの操作によるブラウザUIの変化にも柔軟に対応できます。

最大サイズを基準にしたレイアウトを作りたい場合にはLVHを使うことがあります。
ただしモバイル環境では高さが大きくなりすぎる場合もあるため、用途を選んで使うことが大切です。

まとめ

SVH、DVH、LVHは、スマートフォンのブラウザ表示による高さ問題を解決するために導入されたビューポート単位です。

SVHは最小の高さを基準にするため、モバイル表示でもレイアウトが安定します。
DVHは現在の画面サイズに合わせて動的に変化するため、フルスクリーン表示に向いています。
LVHは最大の高さを基準にするため、レイアウト設計の基準として使われることがあります。

これらの単位を理解して使い分けることで、スマートフォンでもPCでも見やすいホームページを制作できるようになります。

特にモバイル閲覧が多い現在では、画面の高さの扱いはユーザー体験に大きく影響します。
SVH・DVH・LVHを活用して、より安定したレイアウト設計を行いましょう。