ビューポート単位ガイド

このツールでできること

• ビューポート単位ガイドでは、CSSのビューポート単位(vw/vh/dvh/svh/lvh)の違いと使い方を解説する。
• 関連する観点として viewport単位、vw vh、dvh svh を確認し、結果をコピーして別の作業に使えます。

使い方

1. 絞り込み欄を空のままにすると、全ビューポート単位と使用例を表示します。
2. `dvh`、`svh`、`lvh`などの単位名を入力して、必要な行だけを抽出します。
3. 結果欄で、Dynamic、Small、Large viewport heightの違いを確認します。
4. 使用例の`height: 100dvh`、`clamp(1rem, 2vw, 2rem)`、`min(90vw, 1200px)`をコピー対象として確認します。
5. Copyボタンで絞り込み後の結果をコピーします。

入力例・出力例

よくある利用シーン

• モバイルのアドレスバーを考慮して100vhではなく100dvhを検討するとき。
• vmin/vmaxとdvh/svh/lvhの意味を、CSS単位の総合表から切り分けて確認したいとき。
• レスポンシブ文字サイズや最大幅指定に使うvw例だけを短く抜き出したいとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• viewport単位、vw vh、dvh svhの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• ビューポート単位ガイドの主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール