このツールについて
デザインファイルは 1440px のような固定幅で作られることが多く、ビューポートに追随するレイアウトにするにはピクセルを vw に変換する必要があります。デザインの幅と高さを入力してからピクセル値を入れると、vw と vh の両方が同時に得られます。逆変換にも対応しているため、vw の値が実際に何ピクセルになるかも確認できます。
CSS / FRONTEND · ブラウザ内で処理
PX から VW／VH 変換
デザインファイルの寸法を基準にピクセルをビューポート単位へ変換。
入力したデザイン幅・高さを基準に計算します。1vw はビューポート幅の 1% です。
デザインの寸法
デザインで実際に使用しているキャンバスの幅と高さを入力してください。
逆変換
対応するピクセル144px
変換結果
VW（幅基準）4.4444vw
VH（高さ基準）7.1111vh
常用サイズ対照表
| ピクセル値 | vw | vh |
|---|---|---|
8px | 0.5556vw | 0.8889vh |
12px | 0.8333vw | 1.3333vh |
16px | 1.1111vw | 1.7778vh |
24px | 1.6667vw | 2.6667vh |
32px | 2.2222vw | 3.5556vh |
48px | 3.3333vw | 5.3333vh |
64px | 4.4444vw | 7.1111vh |
96px | 6.6667vw | 10.6667vh |
128px | 8.8889vw | 14.2222vh |
240px | 16.6667vw | 26.6667vh |
320px | 22.2222vw | 35.5556vh |
操作手順
- デザインファイルのビューポート幅と高さを入力します。
- ピクセル値を入力して対応する vw と vh を得ます。
- 必要な単位をコピーするか、逆変換で検証します。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- vw にスクロールバーは含まれますか。
- 含まれます。vw はビューポート幅を基準とするため、縦スクロールバーが表示されるデスクトップブラウザでは 100vw が実際の表示領域よりわずかに広くなり、横方向のはみ出しが起きることがあります。厳密に避けたい場合は 100% や dvw などの新しい単位を使ってください。
- 文字サイズに vw をそのまま使ってよいですか。
- 単独での使用は推奨しません。vw のみの文字サイズは極端な幅で読めなくなり、利用者自身の文字サイズ設定も完全に無視します。clamp() で最小値と最大値の間に収め、優先値には rem の定数項を残してください。