px・vw変換ツール｜相互計算とCSS一括変換
pxからvw、vwからpxを基準画面幅に合わせて無料計算。単一の数値変換と、CSS内の複数のpx値をvwへまとめて変換できます。
かんたん単位変換
px
px以外の宣言、CSSコメント、引用符内の文字列は削除せず、そのまま保持します。変換後は実際の表示を確認してください。
入力 CSS
出力 CSS (vw変換済み)
このツールの使い方・詳細
🛠 使い方
単一の値は「かんたん単位変換」でpx→vwまたはvw→pxを選び、値と基準画面幅を指定します。CSSをまとめて変換する場合は入力欄へ貼り付け、必要に応じて小数桁数と変換しない最小pxを設定して変換してください。コメントや文字列は保持されます。
💡 活用シーン・ユースケース
- デザインカンプのpx値をvwへ計算したり、vw値を元のpxへ戻したりする
- 既存CSSのレイアウト寸法だけをレスポンシブ向けに試算する
- 単一のpx値を計算する代わりに、複数のCSS宣言を一括処理する
pxとvwの変換式
1vwは、ブラウザの表示領域（ビューポート）幅の1%です。デザインの基準幅が1440pxの場合、16pxをvwへ変換する式は16 ÷ 1440 × 100 = 1.111…vwになります。
- px → vw：
px ÷ 基準幅 × 100 - vw → px：
vw × 基準幅 ÷ 100
例として、基準幅375pxでは16pxは約4.27vw、基準幅1440pxでは約1.11vwです。同じpx値でも基準幅によって結果が変わるため、デザインカンプの横幅を確認してから計算してください。375・390・768・1440pxはプリセットから選択できます。
すべてをvwへ変換しない方がよい場合
文字サイズや余白を無条件にvwへ変換すると、広い画面では大きくなりすぎ、狭い画面では小さくなりすぎることがあります。必要に応じてclamp()、rem、メディアクエリと使い分け、変換後は実際の画面幅で確認してください。