pxとremを相互変換する使い方｜CSSの単位をまとめて確認

px を入れるだけで、rem・em・vw・% などの単位にまとめて変換できます。どの単位から入れても、残りが一覧で並びます。

ルートフォントサイズやビューポートも設定できます。入力した値は外部へ送らず、手元だけで処理します。

CSSの単位でつまずくところ

CSS には長さの単位がいくつもあり、換算に手間がかかります。こんな場面で手が止まります。

• デザインカンプの 24px を、rem でいくつか計算したい
• ルートフォントサイズが 16px 以外のとき、暗算しにくい
• vw や % に直すのに、その都度電卓を使う

CSS単位変換ツールは、この換算をまとめて肩代わりします。

CSS単位変換ツールの使い方

ツールを開くと、値の入力欄と単位の一覧が出ます。

数値を入れて単位を選ぶと、他の単位がその場で並びます。24px なら 1.5rem や 18pt が出ます。

各行の「コピー」で、必要な単位だけを写せます。

どの単位からでも変換できる

単位を rem に変えれば、そこを基準に px などへ直します。カンプが rem 指定でも、そのまま入れられます。

入力する単位を気にせず、手元の値をそのまま換算できます。

基準サイズを合わせる

「詳細設定」を開くと、ルートフォントサイズやビューポートを変えられます。実際の環境に合わせた値で計算できます。

ルートが 16px 以外のサイトでも、正しい rem に換算できます。

こんな場面で使える

• デザインカンプの実装：px の値を rem に直して書きます。
• レスポンシブ対応：px を vw や % に換算します。
• 印刷用スタイル：px を pt や mm の物理単位に直します。

使用例

たとえば、カンプの余白を rem で書き直す場面を思い浮かべてみます。

24px を入れると、1.5rem がすぐ出ます。ルートが 16px 前提の値を、そのまま CSS に写せます。

計算は手元で動くので、値を外に出さずに換算できます。

安心して使えるポイント

入力した値は、どこにも送信されません。すべて手元のブラウザの中だけで変換します。

作業中のデザイン値も、外に出さずに扱えます。

関連ツール

• CSS単位変換ツール：pxとremなどの単位を相互変換
• CSSグラデーション生成ツール：色を選んでグラデーションを作る
• カラーコード変換ツール：HEX・RGB・HSLを相互変換

補足: 開発者の方へ

rem はルート要素のフォントサイズ基準、em は親要素のフォントサイズ基準で計算します。既定のルートは 16px で、詳細設定で変えられます。vw / vh はビューポートの幅・高さに対する割合、pt は 1pt = 1/72 インチ、cm / mm は 96dpi 換算の物理長です。往復の計算は一度 px に正規化してから各単位へ変換するため、基準サイズを変えると結果も連動します。

まとめ

CSS の単位は種類が多く、手計算では換算に迷います。値を入れれば、9種類の単位を一度に確かめられます。

どの単位からでも変換できます。まずは px の値を入れて、rem との対応を見てみてください。

CSS単位変換ツールを開く