CSS単位変換ツール（px・rem・em・vw）

使い方

1. 「変換する値」に数字を入力し、「元の単位」のボタンで単位を選びます。24px や 1.5rem のように単位を付けて入力すると、その単位で読み取ります
2. 入力するとすぐに、px・rem・em・%・vw・vh・pt・pc・in・cm・mm・Q のすべての単位での大きさが「変換結果」に並びます。入力した単位の行には「（入力）」と付きます
3. rem・em・%・vw・vh は、「計算の基準」の値で計算します。ルートの文字サイズ（初期値 16px）、em と % の基準の文字サイズ（空欄ならルートと同じ）、ビューポートの幅と高さ（初期値 1440 × 900）を、実際のページに合わせて変えてください。「この画面の大きさを入れる」を押すと、いま開いているブラウザのウィンドウの大きさが入ります
4. 「小数の桁数」で、結果を小数第何位まで出すかを選べます（2〜6桁、初期値は4桁）。割り切れずに四捨五入した値には「≈」が付きます
5. 各行のコピーのボタンで、0.875rem のように単位まで含めてクリップボードに入れられます
6. 「px → rem 早見表」には、よく使う px の大きさを、いまのルートの文字サイズで rem にした値が並びます
7. 「CSS をまとめて変換」に CSS を貼り付けると、宣言の値に書かれた px をすべて rem に書き換えます。「rem → px」を選ぶと逆向きに変換します。「変換後の CSS」の「コピー」で結果をコピーできます

ページを開いた時点では、例として 16px が入っています。

計算方法

どの単位も、いったん px に直してから目的の単位に変えます。px と、ページによって変わらない単位（絶対長）の関係は、CSS の仕様（CSS Values and Units Level 4）で次のように決まっています。

• 1in = 96px = 2.54cm
• 1pt = 1/72in = 4/3px（12pt = 16px）
• 1pc = 1/6in = 12pt = 16px
• 1cm = 96px ÷ 2.54（約 37.7953px）
• 1mm = 1/10cm、1Q = 1/4mm

ページによって変わる単位（相対長）は、「計算の基準」の値を使います。

• rem = px ÷ ルートの文字サイズ（16px なら 24px は 1.5rem）
• em = px ÷ 基準の文字サイズ
• % = px ÷ 基準の文字サイズ × 100（font-size に書いたときの割合）
• vw = px ÷ ビューポートの幅 × 100
• vh = px ÷ ビューポートの高さ × 100

計算は分数のまま行うので、0.1 + 0.2 のような小数の誤差は出ません。最後に、選んだ桁数で四捨五入します（0.5 は0から遠いほうへ丸めます）。

具体例

ルートの文字サイズ 16px のとき、14px を入力したときの表示の一部です。

px   14px
rem  0.875rem
em   0.875em
%    87.5%
pt   10.5pt
mm   ≈ 3.7042mm

そのほかの例です。

• 1px → 0.0625rem
• 12pt → 16px（文字の大きさを印刷物のポイントから直すとき）
• 210mm（A4 の幅）→ ≈ 793.7008px
• ビューポートの幅 1440 のとき、24px → ≈ 1.6667vw。100vw → 1440px
• ルートの文字サイズを 10 にしたとき（html に font-size: 62.5% を書いたサイト）、24px → 2.4rem

CSS をまとめて変換するときの決まり

次の CSS を「px → rem」で変換すると、

.card {
  padding: 16px 24px;
  font-size: 14px;
  border: 1px solid;
}

padding: 1rem 1.5rem; と font-size: 0.875rem; に書き換わり、「3か所を rem に変換しました。1px 以下の1か所は px のままです。」と表示されます。border: 1px solid; は、「1px 以下の値（細い線など）は px のまま残す」に印が付いているので変わりません。

書き換えるのは、margin: 16px; のような宣言の「:」より後ろ（値）に書かれた、小文字の px（「rem → px」では rem）だけです。次のものはそのまま残します。

• セレクタ（.w-10px:hover など）と、{ の前に書いた部分
• コメント（/* */ と、Sass の //）、引用符で囲んだ文字列、url(…) の中
• @import や @include のように @ で始まる文
• 大文字で書いた PX・Px。postcss-pxtorem と同じく、px のまま残したい値の目印として使えます
• @media の条件。「@media の条件も変換する」に印を付けると変換します

@media の条件に書いた rem と em は、html の font-size ではなく、ブラウザの初期の文字サイズ（ふつうは 16px）を基準にします。そのため、条件の部分はルートの文字サイズの設定にかかわらず 16px で計算します。ルートを 10px にしていても、@media (min-width: 768px) は 48rem になります。

Sass の変数（$space: 24px;）やカスタムプロパティ（--gap: 8px;）の値は変換します。#{…} の補間を含む行は、正しく読み取れない場合があります。変換後の CSS は、念のため差分を確かめてから使ってください。

FAQ

rem と em はどう違いますか？

rem はルート要素（html）の文字サイズを基準にし、ページのどこに書いても同じ大きさになります。ただし、html 自身の font-size に書いた rem だけは、ブラウザの初期の文字サイズを基準にします（html の文字サイズを、html の文字サイズで決めることはできないためです）。em は、font-size に書いたときは親要素の文字サイズ、ほかのプロパティに書いたときはその要素自身の文字サイズを基準にするので、入れ子にすると大きさが変わります。em を計算するときは、「em・% の基準の文字サイズ」にその要素（font-size なら親要素）の文字サイズを入れてください。

なぜ px ではなく rem を使うのですか？

html の font-size を指定していないか、62.5% のように割合で指定しているサイトでは、利用者がブラウザの設定で標準の文字サイズを大きくすると、rem で書いた大きさは一緒に大きくなりますが、px で書いた大きさは変わりません。文字の大きさや余白を rem で書いておくと、文字を大きくしても読みやすい組みを保てます。html の font-size を 16px のように px で固定していると、rem で書いた大きさも変わりません。なお、ページ全体の拡大（ズーム）では、px で書いた大きさも rem と同じように大きくなります。

ルートの文字サイズは何を入れればよいですか？

CSS で html の font-size を指定していなければ、ブラウザの初期値の 16px です。html { font-size: 62.5%; } と書いたサイトでは 10px（16px の 62.5%）を入れます。利用者がブラウザの文字サイズを変えていると実際の大きさは変わりますが、このアプリは入力した値で計算します。

% はどの大きさに対する割合ですか？

このアプリの % は、font-size に書いたときの値で、親要素の文字サイズに対する割合です。width や margin の % は親要素（包含ブロック）の幅に対する割合なので、このアプリの値とは一致しません。

vw と vh の基準はどの大きさですか？

ビューポート（ブラウザでページを表示している領域）の幅と高さで、ふつうはスクロールバーの分も含みます。html に overflow: scroll などを指定してスクロールバーの場所をいつも取っているときは、その分を除いた大きさが基準です。スマートフォンでは、アドレスバーが隠れたときの高さが vh の基準です（いつも見えている高さを使う svh や、出し入れに合わせて変わる dvh もあります）。「この画面の大きさを入れる」は、このページを開いているウィンドウの大きさを入れるので、狙う画面の幅（スマートフォンなら 375 や 390 など）を直接入力するほうが確実です。

印刷物の mm や pt と同じ大きさになりますか？

CSS の 1in は 96px と決められていて、画面の実際の大きさとは関係ありません。そのため、画面に表示した 10mm が定規で測って 10mm になるとは限りません。印刷では、多くの場合おおむね実寸になります。

入力した値や CSS は送信されますか？

送信されません。計算と変換はすべてブラウザの中で行い、入力した値や CSS は保存しません。ページを読み込み直すと、最初の例に戻ります。