PX・Rem計算とは？

ピクセルと rem を相互変換できるツールです。基準となるフォントサイズを決めて、24px を 1.5rem に直したり、2rem が何 px かを確認したりできます。

CSS でフォントサイズや余白を相対単位へ置き換えたいときや、デザインカンプの値をコードへ落とし込みたいときに便利です。

使い方

1. ベースフォントサイズを設定します。
2. PX 側か Rem 側のどちらかに値を入力します。
3. 反対側の変換結果を確認します。
4. 必要ならコピーして使います。
5. 下にある変換表で、よく使う値も確認できます。

主な設定項目

ベースフォントサイズ

変換の基準になるサイズです。通常のブラウザ既定値である 16px を使うことが多いですが、プロジェクトのルートフォントサイズに合わせて 8px から 128px の間で調整できます。

小数点以下桁数

表示桁数を 0、1、2 から選べます。ざっくり確認したいときは 0、少し細かく見たいときは 1、厳密に扱いたいときは 2 が向いています。

よく使われる変換表

PX 基準と Rem 基準の 2 種類の表があり、よく使う値を一覧で確認できます。頻出サイズを毎回入力せずに見たいときに便利です。

計算の考え方

計算式は次のとおりです。

rem = px ÷ ベースフォントサイズ
px = rem × ベースフォントサイズ

たとえばベースが 16px なら、24px は 1.5rem、2rem は 32px になります。

活用シーン

• デザインカンプの px 値を rem に直したいとき
• ルートフォントサイズを変えた場合の影響を確認したいとき
• 余白や見出しサイズを rem 設計で揃えたいとき
• よく使うサイズを一覧で見ながら実装したいとき

使うときの注意点

• rem は通常、ルート要素のフォントサイズを基準に決まります
• ベースフォントサイズが実装とずれていると、計算結果も実際の表示とずれます
• 変換結果を使う前に、プロジェクトで採用しているルートフォントサイズを確認しておくと安全です