px・rem 換算

CSS の px と rem・em を、基準の文字サイズから行き来して換算します。よく使うサイズの早見表と、CSS の px をまとめて rem に書き換える機能もあります。

基準の文字サイズ

px
px

換算する

px
rem

よく使うサイズの早見表

pxrememよくある用途

いま換算中のサイズに近い行を黄色で示します。

CSS の px をまとめて rem に


  


  

    
計算式：rem = px ÷ ルートの font-size、em = px ÷ 親要素の font-size。多くのブラウザは既定の文字サイズが 16px なので、1rem = 16px、0.875rem = 14px です。

    
rem を使う理由：ブラウザの設定で文字を大きくしている人（既定を 20px にしている人など）には、rem で書いた文字や余白がその割合で大きくなります。px で固定すると設定が反映されず読みにくくなることがあるため、文字サイズは rem が向いています（アクセシビリティの観点）。em は親の文字サイズに連動するので、入れ子にすると掛け算で大きく・小さくなる点に注意してください。

    
html{font-size:62.5%} で 1rem = 10px にする書き方もありますが、ユーザーが既定サイズを変えているとその比率になります（既定 20px なら 1rem = 12.5px）。早見表の数値は小数第4位までで丸めています。換算はブラウザ内だけで行います。

  





px・rem 換算でできること
CSS を書くときに、デザインカンプの px を rem や em に直したり、rem が何 px になるかを確かめたりするための換算ツールです。よく使うサイズの早見表と、貼り付けた CSS の px をまとめて rem に書き換える機能もあります。
使い方
  1. 「ルート（html）の font-size」に rem の基準を入れます。ふつうはブラウザ既定の 16 のままで構いません。em も使うなら「親要素の font-size」も入れます。
  2. 「ピクセル」に px を入れると「ルート基準」の rem が、rem を入れると px が自動で出ます。下に em と、ブラウザの文字サイズを 20px にした人での見え方も表示されます。
  3. 「rem をコピー」などのボタンで値をコピーします。「よく使うサイズの早見表」の各行の「コピー」でも rem をコピーできます。
  4. 「CSS の px をまとめて rem に」に CSS を貼ると、px を rem に書き換えた結果が出ます。必要に応じて「1px 以下（罫線など）は px のまま」「@media の条件は変えない」を切り替え、「変換後の CSS をコピー」を押します。
計算の仕組みと注意点
よくある質問
14px は何 rem？
ルートが 16px なら 14 ÷ 16 = 0.875rem です。「ピクセル」に 14 を入れるか、早見表の 14px の行で確認できます。
html の font-size を 62.5% にすると計算が楽になる？
62.5% にすると 1rem = 10px になり、24px は 2.4rem と暗算しやすくなります。ただしブラウザの既定を変えている人にはその割合で変わります。「10px（62.5% 指定）」ボタンを押すと、この基準での換算に切り替わります。
rem と em はどちらを使えばいい？
サイトの文字サイズや余白を一貫させたいなら、ルート基準の rem が扱いやすいです。ボタンの内側の余白のように、その部品の文字サイズに合わせて伸び縮みさせたいときは em が便利です。「親要素の font-size」を変えると em の値の違いを確かめられます。
border の 1px も rem にしたほうがいい？
1px の罫線は rem にすると拡大時に太さがぶれたり、小数で細く描かれたりするため、px のままにすることが多いです。CSS の一括変換では「1px 以下（罫線など）は px のまま」がはじめからオンになっています。