CSSツール

動的ビューポート単位ジェネレーター

フォールバック付きの動的ビューポート単位(dvh, svh, lvh)を使用したCSSを生成します。

ツールを読み込み中...

動的ビューポート単位ジェネレーターとは

動的ビューポート単位ジェネレーターは、フォールバック付きの動的ビューポート単位(dvh, svh, lvh)を使用したCSSを生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。

Quick answer

Use dynamic viewport units (dvh, svh, lvh) for layouts that need to fill the mobile viewport correctly when the browser UI expands and retracts. Always include a classic vh fallback for older browsers.

Limitations

  • Dynamic viewport units are only relevant on mobile browsers where the address bar and other UI elements expand and retract. On desktop, dvh, svh, and lvh behave identically to vh.
  • Some browsers update dvh on scroll end rather than continuously, which may cause a visible jump in element height as the address bar retracts.

使い方

  1. 必要な値を入力します。
  2. 結果パネルの出力を確認します。
  3. ページに合う部分だけコピーします。
  4. 公開前にブラウザとホスティング環境で確認します。

主な用途

  • 公開前の繰り返し作業を短くする。
  • マークアップ、CSS、チェックリストを準備する。
  • 静的サイトで見落としやすい小さなミスを減らす。

よくあるミス

  • 出力を確認せず本番に入れる。
  • 公開URLではなくローカルURLを使う。
  • build後に公開フォルダ内のファイルを確認しない。

Verification

  1. Load the page on a mobile device or emulator and scroll to confirm the element height adjusts correctly as the browser address bar retracts.
  2. Test with the browser UI both expanded and retracted to verify svh and lvh values produce the expected visible area.

FAQ

動的ビューポート単位ジェネレーターのFAQ

動的ビューポート単位ジェネレーターはブラウザ内で動きますか?

はい。現在のツールはブラウザで出力を生成する設計です。

出力のテストは必要ですか?

はい。テンプレート、ブラウザ、ホスティング設定に合わせて必ず確認してください。

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください