CSS単位換算ツール

px・rem・em・%・vw・vh・pt・pc・in・cm・mmを相互に換算します。基準フォントサイズ・画面サイズ・DPIを指定できます。

換算する値

小数・負の値も入力できます（絶対値10億まで）。入力するたびに自動で換算します。

よく使う値（px）

押すと「換算する値」にその px 値を入れて換算します。

基準の設定

1rem・1em・100% に当たる大きさです。rem・em・% の計算にだけ使います（0.1〜10,000）。

100vw・100vh に当たる表示領域の大きさです（1〜100,000）。

1インチあたりの px 数です。in・cm・mm・pt・pc と px の換算に使います（1〜100,000）。CSSの値を求めるときは96のままにします。

よく使うDPI

換算結果

16px の換算結果

    結果は小数第5位を四捨五入し、小数第4位まで表示します。コピーされるのは単位付きの値（例: 1.5rem）です。

    よく使う px 値の換算表

    rem・em・% は基準フォントサイズ、vw・vh は画面の幅・高さ、pt は解像度（DPI）の値で計算します。上の設定を変えると自動で更新されます。

    px rem・em % pt vw vh

    使い方

    • 「換算する値」に数値を入れて単位を選ぶと、ほかのすべての単位での値を表示します。例：基準フォントサイズ16pxで 24px は 1.5rem、150%、18pt です。
    • 「よく使う値」のボタンを押すと、その px 値をそのまま換算できます。
    • 各行の「コピー」で単位付きの値を、「すべてコピー」で全単位を1行ずつ「px: 24px」の形でコピーします。
    • 入力が数値でない場合や設定が範囲外の場合は、結果を表示せずにメッセージを出します。

    計算のしかた

    • rem・em・%：「基準フォントサイズ」を 1rem = 1em = 100% として計算します（初期値16px）。CSSでは rem はルート要素（html）、em と % は親要素の文字サイズが基準です。親要素の文字サイズがルートと異なる場合は、基準フォントサイズを親要素の値に変えて em・% を確認してください。
    • % は font-size に指定する場合の値です。width・height などの % は親要素の大きさが基準になるため、この値とは一致しません。
    • vw・vh：「画面の幅」「画面の高さ」の1%を 1vw・1vh として計算します（初期値 1920 × 1080px）。例：画面の幅 1920px で 50vw は 960px です。スクロールバーの幅は考慮しません。
    • in・cm・mm・pt・pc：「解像度（DPI）」の値で px と換算します。1in = DPIの値 px で、1in = 2.54cm = 25.4mm = 72pt = 6pc です。

    DPIの設定と CSS の 96dpi の違い

    • CSSでは、画面の実際の解像度に関係なく 1in = 96px と決まっています。CSSに書く値（例: 12pt は何pxか）を求めるときは、DPIを 96 のままにしてください。96dpi では 1pt = 4/3px、1cm ≒ 37.7953px です。
    • 印刷用の画像に必要なピクセル数を求めるときは、印刷の解像度を入れます。例：DPI 350 で 210mm（A4の幅）は 2893.7008px、DPI 300 で 1in は 300px です。
    • DPIを変えると、in・cm・mm・pt・pc と px の関係だけが変わります。rem・em・%・vw・vh と px の関係は変わりません。
    • 画面に表示される実際の長さは、モニターの大きさや拡大率によって変わります。このツールの cm・mm は画面上の実寸を表すものではありません。

    CSS単位の意味

    • px（ピクセル）：CSSの基本単位です。1px = 1/96in として扱われ、高解像度の画面では物理的な画素（デバイスピクセル）と一致しません。
    • pt（ポイント）・pc（パイカ）：印刷で使われる単位です。1pt = 1/72in、1pc = 12pt = 1/6in です。
    • in・cm・mm：1in = 2.54cm = 25.4mm です。CSSでは 1in = 96px として扱われます。
    • rem：ルート要素（html）の文字サイズを1とする単位です。ブラウザーの初期設定は多くの場合16pxです。
    • em：その要素の親の文字サイズを1とする単位です（font-size 以外に使うと、その要素自身の文字サイズが基準）。入れ子にすると倍率が重なります。
    • vw・vh：表示領域（ビューポート）の幅・高さの1%です。
    • %：親要素の値に対する割合です。font-size では親の文字サイズ、width では親の幅が基準です。

    使い分けの目安

    • 文字サイズや余白を、利用者のブラウザー設定（文字の大きさ）に合わせて変えたい場合は rem が使えます。
    • 部品の中で文字サイズに比例させたい余白などは em が使えます。入れ子になると倍率が重なる点に注意してください。
    • 画面の大きさに合わせて変えたい幅や高さは vw・vh が使えます。
    • 印刷用のスタイルシートでは pt・mm・cm が使えます。画面表示では、実際の長さと一致しないことがあります。
    ブラウザ内で計算

    処理はブラウザ内で行い、入力した内容をサーバーへ送信しません。