メインコンテンツにスキップ
ToolShed
ホーム
人気
新着
すべてのツール
読み込み中...
ホーム
デザイン・CSS
ビューポート単位ガイド
デザイン・CSS
無料
登録不要
ビューポート単位ガイド
CSSのビューポート単位(vw/vh/dvh/svh/lvh)の違いと使い方を解説する無料オンラインツール。
入力
結果
--- CSS ビューポート単位 --- vw = ビューポート幅の1% vh = ビューポート高さの1% vmin = vwとvhの小さい方 vmax = vwとvhの大きい方 --- 新しい単位 (モバイル対応) --- dvh = Dynamic viewport height (アドレスバー考慮) svh = Small viewport height (アドレスバー表示時) lvh = Large viewport height (アドレスバー非表示時) --- 使用例 --- .hero { height: 100dvh; } /* モバイルで正しく全画面 */ .text { font-size: clamp(1rem, 2vw, 2rem); } /* レスポンシブ文字 */ .container { width: min(90vw, 1200px); } /* 最大幅付き */
コピー
FAQ
よくある
質問
入力したデータはサーバーに送信されますか？
+
いいえ。ビューポート単位ガイドはすべての処理をお使いのブラウザ内で完結させます。入力内容がサーバーに送信されたり保存されたりすることはありません。
Tailwind CSSと併用できますか？
+
広告は表示されますか？
+
関連ツール
こちらも
おすすめ
CSS単位ガイド
CSSの長さ単位(px/em/rem/vw/vh/ch等)の違いと使い分けを解説する無料オンラインツール。
CSS角度単位
CSS角度単位を表示する無料オンラインツール。CSS角度単位をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。
CSS display一覧
CSSのdisplayプロパティの値と挙動を比較解説する無料オンラインツール。
Flexboxガイド
CSS Flexboxの主要プロパティと値の早見表。レイアウト設計の参考に便利な無料オンラインツール。
border-radiusジェネレーター
CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。
Box Shadow生成
CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。