PX→REM変換ツールとは？
PX→REM変換ツールは、ピクセル（px）の値をrem単位へ変換するためのツールです。remはCSSにおいてルート要素のフォントサイズを基準とする相対単位で、さまざまな画面サイズやユーザー設定に応じて適切に拡大・縮小するレスポンシブでアクセシブルなWebデザインを実現するうえで欠かせません。
PX→REM変換ツールを使う場面
次のようなケースで、このPX→REM変換ツールが役立ちます。
- さまざまなデバイスで比率を保ったまま拡大・縮小させたいレスポンシブサイトを開発するとき
- ユーザーが設定したフォントサイズを尊重する、アクセシブルなデザインを作りたいとき
- 既存デザインを絶対単位（ピクセル）から相対単位（rem）へ置き換え、保守性を高めたいとき
PXからREMを計算する方法
ピクセルをremへ変換する計算式は次のとおりです。
rem ＝ px ÷ ルートのフォントサイズ
各項目の意味は以下のとおりです。
- rem：変換後のrem単位の値
- px：変換したいピクセル値
- ルートのフォントサイズ：ルート要素の基準となるフォントサイズ（多くのブラウザでは標準で16px）
計算例
広告
例1：見出しサイズをピクセルからremへ変換する
標準のルートフォントサイズ16pxを基準に、見出しサイズ24pxをremへ変換します。
| 入力値 | 計算 | 結果 |
|---|---|---|
| ピクセル値：24px ルートのフォントサイズ：16px |
24 ÷ 16 | 1.5rem |
例2：ルートフォントサイズを変えてマージン値を変換する
ルートのフォントサイズを20pxに設定し、マージン40pxをremへ変換します。
| 入力値 | 計算 | 結果 |
|---|---|---|
| ピクセル値：40px ルートのフォントサイズ：20px |
40 ÷ 20 | 2rem |
例3：小さなパディング値を変換する
標準のルートフォントサイズ16pxを基準に、パディング8pxをremへ変換します。
| 入力値 | 計算 | 結果 |
|---|---|---|
| ピクセル値：8px ルートのフォントサイズ：16px |
8 ÷ 16 | 0.5rem |
よく使うピクセル→rem変換早見表
よく使われるピクセル値をremへ変換した早見表です（標準の16pxルートフォントサイズを基準にしています）。
| ピクセル | rem |
|---|---|
| 4 px | 0.25 rem |
| 8 px | 0.5 rem |
| 12 px | 0.75 rem |
| 14 px | 0.88 rem |
| 15 px | 0.94 rem |
| 16 px | 1 rem |
| 18 px | 1.12 rem |
| 20 px | 1.25 rem |
| 24 px | 1.5 rem |
| 25 px | 1.56 rem |
| 32 px | 2 rem |
| 40 px | 2.5 rem |
| 48 px | 3 rem |
| 56 px | 3.5 rem |
| 64 px | 4 rem |
| 80 px | 5 rem |
| 300 px | 18.75 rem |
ピクセルよりremを使うメリット
広告
CSSでrem単位を使うと、次のような利点があります。
- remはブラウザのフォントサイズ設定に合わせて拡大・縮小するため、アクセシビリティが向上する
- メディアクエリでルートのフォントサイズを変えるだけで、レスポンシブ対応が容易になる
- すべての要素で一貫した拡大・縮小が保てる
- 要素同士が比率で連動するため、保守性が高まる
関連ツール
あわせて次のツールもご活用ください。
