px→vw変換ツール
ビューポート幅を基準に、pxをvwに変換します。CSS一括変換にも対応。
単体変換
4.267vw
vw = (px値 ÷ ビューポート幅) × 100
CSS一括変換
入力CSS
出力CSS
使い方
1
ビューポート幅を設定
デザインの基準幅を入力します。プリセット（375px / 768px / 1440px）も選択可能。
2
単体変換 または CSS一括変換
単体のpx値を変換するか、CSSコードを丸ごと入力して一括変換します。
3
結果をコピー
変換結果をコピーしてご利用ください。
px→vw変換とは
vw（viewport width）は、ビューポート幅に対する割合を表すCSS単位です。100vw = ビューポート幅100%となります。レスポンシブデザインで、デバイスサイズに応じて要素を可変させたい場合に使用します。
機能
- 単体変換px値を入力するだけで即座にvw値を計算
- CSS一括変換CSSコードを丸ごと入力して、すべてのpx値を一括変換
- 変換オプション1px以下やborderなど、変換対象を細かく制御可能
- プリセットSP/タブレット/PCのよく使うビューポート幅をワンクリックで設定
活用シーン
- レスポンシブ対応のコーディング
- デザインカンプからのCSS作成
- フルードタイポグラフィの実装
- ファーストビューの可変レイアウト
- 既存CSSのvw化リファクタリング
よくある質問
vwとはどういう単位ですか？
vwはviewport widthの略で、ビューポート（表示領域）の幅に対する割合を表します。1vw = ビューポート幅の1%です。
なぜ1px以下を変換しないオプションがあるのですか？
borderなどで使う1pxをvwに変換すると、デバイスによっては細すぎて見えなくなったり、環境差が出やすくなるためです。
vwとvhの違いは何ですか？
vwはビューポートの幅、vhはビューポートの高さを基準にします。横幅に応じて可変させたい場合はvw、縦幅に応じて可変させたい場合はvhを使います。