vh・svh・lvhの違いとは？新旧のビューポート単位の特徴を解説

最近のスマートフォン表示で「全画面で表示したはずが、スクロールするとバーに隠れる」「意図しない余白が生じる」といった問題を経験したことはありませんか。これらは従来のCSSのvh単位がモバイルブラウザの動的なUIに対応していないため起こる不便な挙動です。最新のCSSにはこの課題を解決するための単位としてsvhとlvhが導入されています。この記事ではvh・svh・lvhの違いを初心者にも分かるように丁寧に解説し、使いどころを実例を交えてお伝えします。読み終える頃にはモバイル対応のレイアウト設計に自信が持てるようになります。

vh svh lvh 違いと基本概念の理解

まず基礎として、vh・svh・lvhとは何かを明確に理解することが重要です。これらはすべてビューポートの高さに関するCSS単位ですが、それぞれが「どの高さを基準にするか」によって性質が大きく異なります。

vhは従来からある単位で、画面の高さの百分率を示します。しかしモバイルブラウザのアドレスバーやツールバーの表示によって見えているエリアが変動するため、その使用だけでは不安定な表示結果を招くことがあります。

vh（Viewport Height）の定義

vhはブラウザのビューポート全体の高さの1パーセントを指します。つまり100vhは画面の高さそのものを埋める意図で使われることが多いです。しかしモバイル環境ではアドレスバーが表示されたり隠れたりすると、表示領域が可変になるにもかかわらずvhは固定された値として扱われる場合があります。これにより意図しない切り捨てやレイアウトのはみ出しが発生することがあります。

また、ブラウザがvhを計算する際、「最大のviewport height」を基準にする挙動をとることが多く、スクロール時にバーが消えてもvhは変わらず、大きすぎる領域を想定してしまうことがあります。

svh（Small Viewport Height）の定義

svhは“スモール・ビューポート・ハイト”の略で、ブラウザUIが完全に表示されている状態を含めた、最も小さい可能性のあるビューポート高さを基準とします。つまりツールバーやアドレスバーなどが表示されている状態でも見える領域を基準に1％を取るため、スクロールしてそれらが隠れてもsvhを使っていた要素は通常より空白ができる可能性があります。

その反面、UIが表示されているときでも要素が切れたり隠れたりしないよう保証できるため、「モーダル」「ポップアップ」「ヒーローセクション上部表示」など、常に可視であるべき要素には非常に適しています。

lvh（Large Viewport Height）の定義

lvhは“ラージ・ビューポート・ハイト”の略で、ブラウザUIが隠れて最大化された状態のビューポート高さを基準とする単位です。vhはこのlvhと同等に扱われることが多く、現状の多くのブラウザの挙動ではvh＝lvhとなっているため、ブラウザバーが隠れる前後で見た目が大きく変わることがあります。

lvhを使うと、最大限の画面領域を活かすデザインが可能です。たとえば全画面バナーや背景画像を画面いっぱいに見せたいときに適していますが、UIが表示されたときには一部が隠れる可能性があることを想定しておく必要があります。

vh svh lvh 違いがもたらすモバイル表示上の課題

モバイルブラウザにおけるvh・svh・lvhの使い分けを理解するには、それぞれを使った場合にどういった問題が起きるかを実際の表示で考えることが大切です。最新の挙動を把握することで、ユーザー体験の損失を防げます。

主な問題として、ヒーローセクションの背景切れ、スクロール時の不自然な余白、モーダルがバーに隠れる、フッターが可視範囲外になる、などがあります。これらはvhをそのまま使ったことが原因であることが多いです。

アドレスバー・ツールバーが見えているときの問題

アドレスバーやツールバーが表示されている初期状態でvhを使って要素を100vhにすると、バーがUIとして重なり、内容が隠れてしまうことがあります。またスクロールする前の画面の一部が切れることで、上部に見せたいテキストやボタンが表示されずにユーザーが混乱することがあります。

さらにアドレスバーが消えた後もvh値が更新されない仕様のブラウザが多いため、可視領域が拡大してもデザインが再調整されず、不自然な余白や表示ズレが残ることがあります。

スクロール時の表示崩れ・レイアウトシフト

ユーザーがスクロールするとき、アドレスバーやツールバーが隠れると画面高さが変わりますが、vhで設定した要素はこの変化に追従しません。そのため、スクロール中に要素の下部が突然見えなくなったり、全画面セクションの終端が露出したりして、ユーザーにとって視覚的に不快な体験となります。

また、スクロールやキーボード表示時などにレイアウトが再描画されることで、CLS（累積的レイアウトシフト）が発生し、ページの読み込みや操作のスムーズさが損なわれることがあります。

互換性・古いブラウザでのサポート状況

svhとlvhは比較的最近導入されたCSS仕様の一部であり、ブラウザによってはまだ完全なサポートがされていない環境もあります。特に古いAndroidブラウザや旧機種では動いていない場合があります。

具体的な対応状況としては、主要なブラウザであるChromeやSafari、Firefoxなどで最新バージョンであればこれらの単位が使えますが、ユーザーの環境によってはフォールバックが必要です。デザイン設計時にはclassic vhを併用し、必要ならばCSSでブラウザ条件をつけるなど対応を検討すべきです。

ブラウザサポートと動作例比較

設計者としてはどのブラウザがsvh・lvhをサポートしているのかを把握することが重要です。また、どのようなケースでどれを使うと表示が最適化されるかを動作例で確認しておきたいところです。

最新のブラウザではこれらの単位がサポートされており、実際にモバイル表示でも期待通りに動作する例が増えています。サポート状況を押さえたうえで、使い分けを適切に設計することがポイントです。

主要ブラウザでのサポート状況

svh・lvh・dvhなどの単位は、主要なスマートフォンおよびデスクトップブラウザで比較的新しいバージョンからサポートされています。具体的にはChromeやSafari、Firefoxの最新リリースで使用可能です。

ただし、非常に古いOSやブラウザ、アプリ内ブラウザでは未対応のものがあるため、重要なレイアウトにはvhをフォールバックとして指定するか、メディアクエリで制御をする設計が望ましくなります。

vh／svh／lvh／dvh の動作比較表

動作例：ヒーローセクションとモーダル

ヒーローセクションを画面いっぱいに表示させたい場面では、100lvhまたは100dvhを使うとバーが隠れて最大の表示領域を使えるため、より印象的なビジュアルが可能です。

ただしバーが表示されている初期状態では100lvhを使うと上部のコンテンツがバーの下に隠れてしまうことがあるため、通常は100svhまたはフォールバックでvhを併記してレイアウトが崩れないようにします。

実践：vh・svh・lvh 違いをふまえた使い分けガイド

ここまでで各単位の特徴とモバイル表示での課題を把握できたはずです。実際のウェブデザインにおいては、どんな状況でどの単位を選べばよいかを具体的に押さえておくことが重要です。以下はよくあるシナリオ別の使い分けの指針です。

ヒーローセクションやファーストビュー

画面を開いたときに大きなビジュアルやキャッチコピーを見せるヒーローセクションでは、まず画面全体を使う感触が大切です。バーが隠れて最大スペースになる状態を活かすには100lvhまたは100dvhが有効です。

ただしバーが表示されている最小サイズにも配慮しておく必要があります。その場合は高さを100svhとし、100lvhを指定しておいてフォールバックとしてlvh優先、svhを補助的に使う戦略が有効です。

モーダル・ポップアップ表示

モーダルやポップアップはユーザーが操作を始める前でも完全に見えることが望まれます。ここではsvhを使うことで、アドレスバー等が表示されていても要素の底部が隠れる心配を減らせます。

dvhもオプションですが、モーダル内部でスクロールが発生する場合やUIの変化に追随する必要がある場合に限定的に使用するべきです。静的なモーダルにはsvhが安全です。

フッターやナビゲーションバーの位置固定

フッターやナビゲーションバーを画面下に固定表示したい場合、動的に画面の可視領域が変わるときにこれらがはみ出したり隠れたりすることがあります。そのため100dvhを指定すると、バーが消えて見える範囲にフッターが正しく追従するメリットがあります。

一方でdvhはスクロールなどで再描画が頻発するため、パフォーマンスに影響を与える可能性があります。特に複雑な子要素が多いコンポーネントには避けた方が良いです。

スタティックコンテンツやコンテナー設定

大きな画像、テキスト主体のセクション、段組みレイアウトなど、動的なUI変化がほぼ発生しない固定要素にはlvhまたは従来のvhを使うと実装が手軽です。UIが変わったときのギャップが気になりにくいためです。

ただしフォールバックとして、svhやstatic vhを書き加えることで、未対応ブラウザや予期せぬ環境でも見た目の一貫性を保つ設計が望まれます。

実装上のコツと落とし穴回避策

デザインが崩れがちなこの領域で成功するためには、単位の選び方だけでなく実装の仕方や落とし穴を把握しておくことが肝心です。ここでは実践で使う際の注意点と改善テクニックをご紹介します。

フォールバック指定の併用

古いブラウザでsvhやlvhが未対応の場合を考慮し、CSSでvhを先に書き、その後にsvhまたはlvhを上書きするスタイルを書くとよいです。こうすることで新単位が使える環境ではそちらが優先され、未対応の環境では従来挙動が保たれます。

例としてheight:100vh; height:100svh;といった順序で書くと、svhが使える環境ではsvhが適用されますが、未対応時はvhが効くため互換性が確保されます。必要であればメディアクエリで端末幅やブラウザ判定を使う方法もあります。

dvh使用時のパフォーマンス考慮

dvhを使うとブラウザUIの表示/非表示に応じて高さがリアルタイムで再計算されます。そのため頻繁なスクロールやUIの出現がある場合、レイアウトの再描画が発生し、パフォーマンスに影響を与えることがあります。特にアニメーションや多くの子要素を持つ構成では慎重に使うことが望まれます。

パフォーマンスが問題となる場合は、UI変化が落ち着いた時点でのみdvhを使うか、アニメーションを避けるスタイルを選ぶのが有効です。また、視覚的なシフトの原因になる要素にはoverflow制御やfixedポジション調整を検討することも有効です。

テストと実機検証の重要性

どの単位がどの端末でどう表示されるかは、種類やOSバージョン、ブラウザによって異なります。エミュレーターのみでなく実際のスマートフォン／タブレットでテストすることで、アドレスバーの見え方やUIの挙動を把握できます。

特にiPhone SafariやAndroid Chromeの最新アップデートでの挙動は頻繁に変わるため、リリース前に必ず複数環境でヒーローセクションやモーダル、フッターなどの表示を確認してください。

まとめ

vh・svh・lvhの違いを正しく理解すると、モバイル表示での表示切れや余白、レイアウトの不安定さといった問題をほぼ回避できます。従来のvhはバーの動きに対応せず、lvhは最大領域を、svhは最小領域を基準にします。目的に応じてこれらを使い分けることでより精緻なレイアウト設計が可能になります。

ヒーローセクションやファーストビューにはlvh／dvhを、モーダルなど常に可視性が求められる要素にはsvhを、そして動的UI変化に追随させたい要素にはdvhを組み合わせるのが効果的です。互換性とパフォーマンスにも注意しながら、フォールバックも含めた実装を心がけてください。