Tailwind CSSと併用できますか？

はい。ビューポート単位ガイドが出力するCSSはTailwind CSSの任意のクラスと共存でき、必要に応じて任意値クラス（[xxx]記法）への変換も可能です。

広告は表示されますか？

運営維持のため一部ページに広告を表示していますが、ツール本体の動作を妨げない範囲に留めています。ブロッカーを利用されても機能は動作します。

デザイン・CSS無料登録不要

ビューポート単位ガイド

CSSのビューポート単位(vw/vh/dvh/svh/lvh)の違いと使い方を解説する無料オンラインツール。

Input

Result

--- 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

よくある質問

いいえ。ビューポート単位ガイドはすべての処理をお使いのブラウザ内で完結させます。入力内容がサーバーに送信されたり保存されたりすることはありません。

こちらもおすすめ

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で直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...