動的ビューポート単位ジェネレーターとは
モダンCSSのビューポート単位には3つのバリエーションがあります。スモールビューポート（svh）はブラウザUIを除いたビューポート高さ、ラージビューポート（lvh）はブラウザUIが格納された状態のビューポート高さ、ダイナミックビューポート（dvh）はブラウザUIの表示・非表示に応じて調整されます。これらは、モバイルでブラウザのアドレスバーが表示領域を変える場合の全画面レイアウトに便利です。
クイックアンサー
ブラウザUIの展開・格納時にモバイルビューポートを正しく埋めるレイアウトには、動的ビューポート単位（dvh、svh、lvh）を使用します。古いブラウザ向けにクラシックなvhフォールバックを必ず含めてください。
Last updated: 2026-06-11
制限事項
- 動的ビューポート単位は、アドレスバーなどのブラウザUIが展開・格納されるモバイルブラウザでのみ意味があります。デスクトップではdvh、svh、lvhはvhと同一に動作します。
- 一部のブラウザはdvhを継続的ではなくスクロール終了時に更新するため、アドレスバー格納時に要素の高さが視覚的にジャンプする可能性があります。
- モバイルブラウザでは、画面キーボードが表示されるとdvhが変化します。フォーム入力、検索フィールド、チャットインターフェースなどdvhに依存する全画面レイアウトは、ユーザーが入力を開始すると予期せずリサイズする可能性があります。フォーム要素を含むレイアウトにはsvhまたは固定vhフォールバックを検討してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 単位タイプ（svh、lvh、dvh、svw、lvw、dvw）を選択します。
- 全高には100などのビューポート単位のパーセンテージ値を設定します。
- min-heightやheightなど、ビューポート単位を適用するCSSプロパティを選択します。
- モダンな単位とクラシックなvhフォールバックを含むCSS宣言をコピーします。
主な用途
- モバイル端末で表示可能な画面を正確に埋めるヒーローセクションを作成する。
- スクロール時にモバイルブラウザのツールバーの背後にコンテンツが隠れるのを防ぐ。
- ブラウザUIの表示・格納に応じて変化するビューポートサイズに適応する全画面パネルを構築する。