CSS単位変換｜px・rem・em・%・vw・vhを相互計算

CSSのpx・rem・em・%・vw・vh・vmin・vmax・ptなどを相互変換。文字サイズと画面サイズを指定し、換算式・CSSコード・一覧表を確認できます。

換算に使う基準サイズ

16pxをルート16pxで換算すると1remです。

変換結果 1rem
16px = 16px = 1rem
font-size: 1rem;

基準について：remはルート要素、emは対象要素、%はプロパティごとに決まる参照値へ依存します。このツールではem・%の基準サイズ欄を参照値として計算します。

よく使うpxサイズの換算表

pxremem%vwvh

このツールの使い方・詳細

🛠 使い方

変換元の数値と単位、変換先の単位を選びます。rem・em・%・vw・vhを使う場合は基準文字サイズや画面サイズを指定し、結果またはCSS宣言をコピーします。

💡 活用シーン・ユースケース

  • デザインカンプのpx値をremやemへ換算する
  • 画面サイズを基準にpxとvw・vhを相互計算する
  • 印刷用のpt・mmとWeb用のpxをCSS仕様の比率で換算する

CSS単位を基準サイズ付きで相互変換

px・rem・em・%・vw・vh・vmin・vmaxと、in・cm・mm・Q・pt・pcを相互変換できます。相対単位は表示環境や文字サイズによって実際の長さが変わるため、ルート文字サイズ、em・%の参照サイズ、画面幅・高さを指定して計算します。

対応するCSS長さ単位

  • px
    CSSの基準となるピクセル単位
  • rem
    ルート要素の文字サイズに対する倍率
  • em
    対象要素の文字サイズに対する倍率
  • %
    プロパティごとの参照値に対する割合
  • vw / vh
    画面幅・高さの1%を1とする単位
  • vmin / vmax
    画面の短辺・長辺の1%を1とする単位
  • in / cm / mm / Q
    CSS仕様で比率が固定された物理単位
  • pt
    1pt = 1/72in = 96/72px
  • pc
    1pc = 1/6in = 16px

pxからrem・em・%へ変換する式

16pxをルート文字サイズ16pxで割ると1remです。16pxをemの基準16pxで割ると1em、同じ基準に対する割合は100%です。基準が20pxなら、16pxは0.8emまたは80%になります。

vw・vhの換算方法

1vwは画面幅の1%、1vhは画面高さの1%です。画面幅1440pxでは16px ÷ 1440px × 100 = 約1.1111vwになります。現在のブラウザ表示領域を使う場合は「現在の画面サイズを使用」を押してください。CSS全体のpx値をvwへまとめて置換する場合は、関連ツールの「px・vw変換」を利用できます。

%とemを使うときの注意

emや%の参照先はCSSプロパティによって異なります。特に幅・高さ・余白の%は、単純に文字サイズを基準としない場合があります。このツールの%換算は指定した参照サイズに対する数値計算なので、実装時は対象プロパティの仕様も確認してください。

換算根拠とデータの扱い

換算式はW3CのCSS Values and Unitsにある相対・絶対長の定義に基づきます。入力値と結果はブラウザ内だけで計算し、当サイトのサーバーへ送信・保存しません。

関連するツール