使い方
- 値にサイズを入力し、換算で方向を選びます（例：px から rem へ）。
- 基準の文字サイズ（px）を確認します。サイトがルート要素に設定している値を使ってください。ブラウザの既定値は16pxです。
- 換算するCSSに CSS を貼り付け、CSS の px を換算する単位で rem か em を選びます。
- 換算後の CSSをコピーするか、換算表でサイズを確認します。
px、rem、em の関係
px は、画面上の絶対的な長さです。rem はルート要素（html 要素）の文字サイズの倍数で、em はその値を使っている要素の文字サイズの倍数です。どちらも基準の文字サイズに従うため、基準が16pxなら、1rem は16px です。
px を rem に換算するには基準で割り、rem や em を px に戻すには基準を掛けます。基準の大きさが同じなら、rem と em は同じ数になり、親要素の文字サイズが基準と異なるときだけ違いが出ます。
rem = px / 基準の文字サイズ; px = rem x 基準の文字サイズCSS の換算で変わるものと、変わらないもの
px が付いた数字はすべて換算されます。負の値や .5px のような小数も含みます。CSS の書き方に合わせ、小数点は点で書かれ、最大4桁までで、末尾の0は付きません。長さが0の場合は、単位のない0になります。CSS ではこの書き方が認められています。
換算ツールは、CSS の意味を解釈しません。コメントや文字列の中の px も換算されます。例えば content の文字として10px と書かれていれば、それも換算されます。url() の中身はそのまま残るため、px で終わるファイル名は変わりません。使う前に結果を確認してください。
- 文字サイズ、余白、幅のうち、訪問者が文字の大きさを変えたときに一緒に広がってほしいものは rem を使ってください。
- 細い罫線は1px のままにしてください。一部の画面では、rem の値だと線がぼやけて見えることがあるためです。
例：基準16pxで本文18px
18を16で割ると1.125なので、font-size: 18px は font-size: 1.125rem になります。余白の40px は、40を16で割って2.5になるため、2.5rem になります。
基準が10pxなら、同じ24pxは2.4remです。表では、基準が16pxのとき24pxは1.5remと示されます。既定の例にある CSS には px の長さが6つあり、すべて換算されるため、件数は6と表示されます。
よくある質問
基準の文字サイズが16pxなのはなぜですか？
多くのブラウザは、ルート要素の既定の文字サイズとして16pxを使うため、サイトが別の大きさを設定していなければ1rem は16px です。値は、サイトが html 要素に設定している大きさを入力してください。
rem と em の違いは何ですか？
rem はルート要素の文字サイズを基準にするため、ページのどこでも同じ大きさになります。em は、それを使っている要素の文字サイズを基準にするため、要素が入れ子になると大きさが変わります。基準が同じなら、数字は同じになります。
CSS の px をすべて rem に換算すべきですか？
いつもそうとは限りません。1pxの罫線は、多くの画面で px のほうがくっきり見え、小さな部品は固定したほうがよく見えることがあります。訪問者の設定に合わせて広がってほしい文字サイズ、余白、レイアウトの幅に rem を使ってください。
CSS の一部の px が換算されないのはなぜですか？
px の値は、単独の長さとして立っている場合だけ換算されます。url() の中の値や、10pxx、10px-2のように単純な長さではない文字列は、そのまま残ります。珍しい値は、手で確認してください。
早見表が64pxまでなのはなぜですか？
デザイナーがよく使うサイズを載せているためです。それ以外の大きさは、値の欄に入力し、換算の方向を選んでください。
出典
数値と文章の最終確認日：2026年11月10日火曜日。