PX・Rem計算
PXとRemを基準サイズから相互変換
変換設定
詳細設定
よく使われる変換表
px → rem (16px基準)
| px値 | rem値 |
|---|---|
8px | 0.5rem |
12px | 0.8rem |
14px | 0.9rem |
16px | 1.0rem |
18px | 1.1rem |
20px | 1.3rem |
24px | 1.5rem |
28px | 1.8rem |
32px | 2.0rem |
36px | 2.3rem |
40px | 2.5rem |
48px | 3.0rem |
56px | 3.5rem |
64px | 4.0rem |
72px | 4.5rem |
80px | 5.0rem |
96px | 6.0rem |
rem → px (16px基準)
| rem値 | px値 |
|---|---|
0.3rem | 4px |
0.5rem | 8px |
0.8rem | 12px |
1.0rem | 16px |
1.1rem | 18px |
1.3rem | 20px |
1.5rem | 24px |
1.8rem | 28px |
2.0rem | 32px |
2.3rem | 36px |
2.5rem | 40px |
3.0rem | 48px |
3.5rem | 56px |
4.0rem | 64px |
5.0rem | 80px |
6.0rem | 96px |
8.0rem | 128px |
PX・Rem計算とは？
ピクセルと rem を相互変換できる計算ツールです。基準となるフォントサイズを決めたうえで、24px を 1.5rem に直したり、2rem が何 px になるかを確認したりできます。
CSS でフォントサイズや余白を相対単位に置き換えるとき、デザインカンプの値をコードへ落とし込むとき、ルートフォントサイズ変更の影響を見たいときに使えます。入力はブラウザ内でリアルタイムに計算され、サーバーには送信されません。
使い方
- 変換方式を
px → remかrem → pxから選びます。 - ベースフォントサイズを設定します（既定は
16px）。 - 入力欄に値を入力すると、反対側の結果が即時に表示されます。
- 結果欄のコピーボタンで値を取得します。
- 下部の変換表で、よく使う値も一覧で確認できます。
主な設定項目
変換方式
px → rem と rem → px を切り替えられます。デザインカンプから値を読み取って rem に直す場合は前者、CSS で書かれている rem を画面上の px 感覚で確認したい場合は後者が向いています。
ベースフォントサイズ
変換の基準になる値です。ブラウザ既定の 16px を使うケースが多いですが、プロジェクトの :root で font-size を変えている場合はその値に合わせて 8px から 128px の範囲で調整してください。値を変えるだけで、入力欄の結果と変換表がすべて再計算されます。
小数点以下桁数
rem の表示桁数を 0、1、2 から選べます。ラベルにはおおよその雰囲気が分かるよう例が添えてあります。
0（例1rem）：丸めてざっくり見たいときに1（例1.5rem）：一般的な rem 設計の値域2（例1.25rem）：Tailwind 風の 0.125 刻みで厳密に見たいときに
よく使われる変換表
8px から 96px の頻出 px 値と、0.25rem から 8rem の頻出 rem 値を 2 つの表で一覧表示します。font-size や padding、margin の設計で頻出する値を、毎回入力せずに確認できます。
計算の考え方
計算式は次のとおりです。
rem = px ÷ ベースフォントサイズ
px = rem × ベースフォントサイズ
ベースが 16px の場合、24px は 1.5rem、32px は 2rem、1.25rem は 20px のようになります。ベースを 10px に変えると、同じ 24px が 2.4rem になるなど、基準値次第で結果が変わる点が rem 設計の特徴です。
活用シーン
- デザインカンプの px 値を、CSS の rem 値へ機械的に置き換えるとき
- ルートフォントサイズを変更したとき、各サイズがどう変わるかを確認するとき
paddingや見出しサイズなど、頻出する値を rem で揃えておきたいとき- 実装中に「いま入力しているこの rem 値、実際の px はいくつか」をその場で確認するとき
使うときの注意点
- rem は原則として
<html>要素のフォントサイズを基準に解決されるため、プロジェクトでhtml { font-size: ... }を変えている場合はベースフォントサイズもそれに合わせる必要があります - ベースフォントサイズが実際のルートとずれていると、計算結果と表示サイズもずれます
- アクセシビリティ対応でユーザーがブラウザの文字サイズを変更している環境では、rem 値は利用者側の設定にも影響を受けます
