BLOG

【CSS解説】dvh・lvh・svhとは？新しいビューポート単位を使いこなそう

スマホやタブレットでサイトを作っていると、アドレスバーやUIの表示・非表示で高さが変わってしまう問題に悩まされることがあります。
そんなときに役立つのが、CSSの新しいビューポート単位dvh・lvh・svhです。
今回は導入時期やブラウザ対応状況とあわせて、それぞれの意味や使いどころを整理してみました。

従来のvhの問題点

これまでは「画面の高さ」を表す単位として100vhをよく使ってきました。
しかしモバイル環境では、ブラウザのアドレスバーやナビゲーションUIが表示・非表示されることで100vhの値が変動し、
「全画面にしたはずなのに下に余白ができる」ことがあります。
逆に、position: fixedで高さを100vhに指定した要素が実際の表示領域を突き抜けてしまい、下部が見切れてスクロールしても表示されないといった不具合も起こりがちです。
こうした「見えている高さ」と「CSSで計算される高さ」の差が、開発者を長らく悩ませてきました。

1. 導入時期（いつから使える？）

新しいビューポート単位は、CSS Viewport-relative lengths 仕様の一部として2022年3月ごろに策定が進められ、
実装はメジャーなブラウザでも進み、2023年末〜2024年頃から徐々に使えるようになりました。
2025年現在では、主要なブラウザ（Chrome / Safari / Firefox / Edge）で広く対応済みとなっています。

  • Chrome 108 以降
  • Edge 108 以降
  • Safari 15.4 以降
  • Firefox 101 以降

実務上はほとんどの環境で利用可能ですが、iOS版Firefoxや一部アプリ内ブラウザでは挙動が不安定なケースも報告されています。
そのため、利用する際は@supportsを使ってvhをフォールバック指定しておくと安心です。

2. dvh・lvh・svhの違い

こうした問題を解決するために登場したのが、dvh / lvh / svh です。
それぞれ次のように定義されています。

  • dvh (Dynamic Viewport Height)
    ブラウザUIの表示・非表示に応じて動的に変化する高さ。
    もっとも「実際に見えている高さ」に近い値です。
  • lvh (Large Viewport Height)
    ブラウザUIが非表示のときの最大の高さ。
    いわば「フルスクリーン状態の高さ」。
  • svh (Small Viewport Height)
    ブラウザUIが表示されているときの最小の高さ。
    常に「最悪のケース」に備えられる数値です。

3. 使いどころの例

例えば、スマホでの全画面セクションにdvhを使うと、
UIの開閉に応じて高さが調整されるので、余計な空白や見切れが出にくくなります。 


.hero {
  height: 100dvh; /* 動的に変化する高さ */
}

一方で、lvhは最大サイズを前提にしたレイアウトに便利ですし、
svhは最小サイズを想定したUI崩れ防止に役立ちます。

4. vw 系単位についての補足

今回は高さに関わる単位に焦点を当てましたが、幅方向にも同様の仕組みがあります。
dvw / lvw / svw という単位が追加されており、ブラウザUIの有無で幅が変化する状況に対応できます。
スマホ環境では高さほど問題は目立ちませんが、横スクロールレイアウトやカルーセルUIなどでは意識しておくと安心です。

5. ブラウザ対応状況

主要ブラウザ（Chrome / Safari / Firefox / Edge）では、dvh・lvh・svh だけでなく dvw・lvw・svw もすでに対応が進んでいます。
2025年時点では、ほぼすべての最新環境で利用可能です。
ただし一部の古い環境やモバイルアプリ内ブラウザでは未対応の可能性があるため、
vh / vw と併用してフォールバックを準備しておくのがベストです。

まとめ

dvh / lvh / svh は、モバイルブラウザの「高さが変わる問題」を解決してくれる頼もしい単位です。
さらに幅方向にも dvw / lvw / svw があり、用途に合わせて使い分けることで、より安定したレスポンシブデザインが可能になります。
新旧単位を組み合わせて、より快適なWeb体験を提供していきましょう。

ご相談ください

札幌拠点リモートでも全国案件対応OK。
WordPressフルカスタマイズやNuxt開発のご依頼は
▶ 山キノコロリ WEB事業部 まで！

BACK