REM→PX変換ツールとは？
REM→PX変換ツールは、相対単位である「rem」をピクセル（px）に変換するツールです。Web制作において、remはルート要素（通常は <html> 要素）のフォントサイズを基準とする相対単位で、一方のpxは絶対単位です。このツールを使えば、remが実際に何ピクセルに相当するのかを把握しながら、拡張性とアクセシビリティに優れたデザインを維持できます。
こんなときに便利
このツールは、特に次のような場面で役立ちます。
- レスポンシブなWebサイトを設計する際に、相対単位と絶対単位を相互に変換したいとき
- remを採用したデザインシステムを扱っていて、確認用にピクセル値が必要なとき
- ピクセル単位で指定されたモックアップやデザインカンプを、remでコーディングしたいとき
REMからPXを計算する方法
remからpxへの変換は、とてもシンプルな計算式で求められます。
PX = REM × ルートフォントサイズ
各項目の意味は次のとおりです。
- PX：変換後のピクセル値
- REM：変換したいremの値
- ルートフォントサイズ：html要素の基準となるフォントサイズ（多くのブラウザでは初期値が16px）
remの値はルートのフォントサイズを基準に決まります。つまり、CSSで <html> に次のように16pxのフォントサイズを指定した場合、
広告
html { font-size: 16px; }
このとき、1rem = 16px となります。
計算例
基本的なREM→PX変換
ルートフォントサイズを初期値の16pxとして、1.5remをピクセルに変換します。
| REMの値 | ルートフォントサイズ | 計算 | 結果 |
|---|---|---|---|
| 1.5rem | 16px | 1.5 × 16 | 24px |
複数のREM値をまとめて変換
ルートフォントサイズを16pxとして、0.75rem・2rem・3.5remをピクセルに変換します。
| REMの値 | ルートフォントサイズ | 計算 | 結果 |
|---|---|---|---|
| 0.75rem | 16px | 0.75 × 16 | 12px |
| 2rem | 16px | 2 × 16 | 32px |
| 3.5rem | 16px | 3.5 × 16 | 56px |
ルートフォントサイズを変更した場合
ルートフォントサイズを20pxに設定して、2.5remをピクセルに変換します。
| REMの値 | ルートフォントサイズ | 計算 | 結果 |
|---|---|---|---|
| 2.5rem | 20px | 2.5 × 20 | 50px |
よく使うREM→PX早見表
広告
よく使われるremの値をピクセルに変換した早見表です（ルートフォントサイズの初期値16pxを基準）。
| REMの値 | ピクセル値 |
|---|---|
| 0.25 rem | 4 px |
| 0.5 rem | 8 px |
| 0.75 rem | 12 px |
| 0.875 rem | 14 px |
| 1 rem | 16 px |
| 1.125 rem | 18 px |
| 1.25 rem | 20 px |
| 1.5 rem | 24 px |
| 1.875 rem | 30 px |
| 2 rem | 32 px |
| 2.25 rem | 36 px |
| 2.5 rem | 40 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
関連ツール
Web制作やデザインに役立つツールは、こちらもあわせてご活用ください。
