PXからREMへのコンバーター – 無料CSSユニット計算ツール

PX、REM、EM単位コンバーター

pxからremおよびemへのコンバーターは、設定したルートフォントサイズと親要素のフォントサイズを使って、CSSの長さをピクセル（px）、ルートem（rem）、emの間で変換します。これら3つの単位は、ウェブページのスタイル設定に使われる言語であるCSSで、テキストや間隔のサイズを指定する最も一般的な方法です。

px、rem、emとは？

**ピクセル（px）**は固定単位です。幅を200pxに設定したボックスは、ページで使われるフォントサイズにかかわらず、幅200pxのままです。

rem（「root em」）は、ページのルート要素のフォントサイズ、通常は<html>タグに連動して拡大縮小する単位です。ブラウザーは、サイトが変更しない限り、その既定のフォントサイズを通常16pxに設定します。ルートのフォントサイズが16pxなら、1remは16pxに等しくなります。

emは、使われている要素自身のフォントサイズに連動して拡大縮小する単位です。emがfont-size自体を設定する場合は、親要素から継承したフォントサイズを基準に測られます。親要素とは、その要素を含む要素のことです。親要素がfont-size: 20pxなら、その親の内側のfont-size: 1emは20pxに等しくなります。コンバーターはこの親要素を基準とするケースを使います。

remとemの主な違いは、それぞれが何を基準に測るかです。remは常にルート要素を参照します。emはその要素自身、または継承したフォントサイズを参照するため、入れ子の階層ごとに値が変わることがあります。

pxをremに変換する方法

ピクセルをremに変換するには、ピクセル値をルートのフォントサイズで割ります。

rem = px ÷ ルートのフォントサイズ

例

ルートのフォントサイズがデフォルトの16pxの場合、24pxは次のように変換されます。

24 ÷ 16 = 1.5rem

サイトがルートのフォントサイズを10pxに設定している場合（16pxの62.5%が10pxになるため、html { font-size: 62.5%; }を設定する一般的な方法です）、同じ24pxは次のようになります。

24 ÷ 10 = 2.4rem

remをpxに変換する方法

逆方向に変換するには、remの値にルートのフォントサイズを掛けます。

px = rem × ルートのフォントサイズ

ルートが16pxの場合、1.5remは1.5 × 16 = 24pxに戻ります。

pxをemに変換する方法

ピクセルをemに変換するには、ピクセル値を親要素のフォントサイズで割ります。

em = px ÷ 親要素のフォントサイズ

例

親要素のフォントサイズが20pxの場合、24pxは次のように変換されます。

24 ÷ 20 = 1.2em

emをpxに変換する方法

emの値に親要素のフォントサイズを掛けます。

px = em × 親要素のフォントサイズ

親要素が20pxの場合、1.2emは1.2 × 20 = 24pxに戻ります。

remをemに、emをremに変換する方法

remとemは異なるフォントサイズを基準にするため、両者の変換にはルートのフォントサイズと親要素のフォントサイズの両方が必要です。

em = rem ×（ルートのフォントサイズ ÷ 親要素のフォントサイズ）

rem = em ×（親要素のフォントサイズ ÷ ルートのフォントサイズ）

例

ルートのフォントサイズが16px、親要素のフォントサイズが20pxの場合、2remは次のように変換されます。

2 ×（16 ÷ 20）= 1.6em

ルートと親要素のフォントサイズが同じなら、1remは常に1emに相当します。

各単位が役立つ場面

ピクセルは、1pxの境界線や固定幅のアイコンなど、サイズを変えないほうがよい細部に適しています。

remは、ページ全体で一貫させたい間隔や文字のスタイルに広く使われます。常にルートのフォントサイズを基準にするため、remの値は要素がどれだけ深く入れ子になっていても変わりません。そのため、利用者がブラウザーの既定のフォントサイズを大きくした場合も、remベースのレイアウトは自動的に調整され、弱視の読者にも役立ちます。

emは、ボタンのような単独で完結したコンポーネント内で、パディングをそのボタン自身のフォントサイズに合わせて拡大縮小したい場合に適しています。emでよくある問題は値が累積することです。入れ子になった複数の要素がそれぞれfont-size: 1.2emを使うと、各階層で直前の値が乗算され、フォントサイズが意図より速く大きくなります。

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

3階層後には、テキストは、単一の1.2emルールから開発者が予想する20%ではなく、約73%大きくなっています。

コンバーターの使い方

1. ピクセル、rem、emのいずれかの欄に値を入力します。
2. ほかの二つの欄は自動的に更新されます。
3. ルートのフォントサイズを、プロジェクトの<html>要素に合わせて設定します（ほとんどのブラウザーでは初期値で16px）。
4. 親のフォントサイズを、remまたはemの値が入る要素のフォントサイズに合わせて設定します。
5. 欄の横にあるコピー用ボタンを使うと、その値をコピーできます。

このツールは、三つの値の相対的なサイズを視覚的に比べられるよう、並べて表示します。

よくある質問

remとemの違いは何ですか。 remは常にルート要素のフォントサイズを参照します。emは、使われている要素のフォントサイズを参照し、font-size自体の場合は親から継承したサイズです。remの値はページ全体で同じままですが、emの値は要素の入れ子の深さによって変わることがあります。

ブラウザーが16pxを既定のフォントサイズにしているのはなぜですか。 16pxは主要なブラウザーで一般的な既定の文字サイズで、ユーザーはブラウザーの設定で変更できます。ウェブアクセシビリティのガイダンスでは、内容や機能を失うことなく、テキストを最大200パーセントまで拡大できることが求められています。文字サイズをremで指定すると、ページは読者が選んだ既定のサイズに従います。

62.5%トリックとは何ですか？ html { font-size: 62.5%; }を設定すると、既定のルートのフォントサイズ16pxが10pxになります。16の62.5%が10だからです。これによりremの計算が簡単になります。1.6remは16px、2.4remは24pxに相当します。

px、rem、emの値は負の値にできますか。 はい。マージンやCSSの変形（transform）など、負の長さを受け付けるプロパティでは可能です。CSSでは、パディングは負の値にできません。パディングに負の値を指定すると無効になり、ブラウザーはそれを無視します。

すべてのピクセル値をremに変換すべきですか？ 必ずしもそうではありません。境界線などの細部は、通常ピクセルのままにします。フォントサイズに合わせて拡大縮小する必要がほとんどなく、サブピクセル幅では不均一に見えることがあるためです。remは、利用者のフォントサイズ設定に合わせて拡大縮小したい間隔や文字のスタイルに適しています。

単位の選択はページのパフォーマンスに影響しますか？ いいえ。ブラウザーはレイアウト時にすべてのCSSの長さを同じ内部値に変換するため、px、rem、emは同じ速さで描画されます。単位の選択が影響するのは速度ではなく、保守性とアクセシビリティです。

参考文献

1. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4. CSS Values and Units Level 4, font-relative lengths — emは要素の計算済みフォントサイズ（font-sizeで使う場合は継承したサイズ）に等しく、remはルート要素でのem単位に等しくなります。
2. Mozilla. font-size, MDN Web Docs. MDN: font-size — 祖先要素にフォントサイズが設定されていない場合、1emはブラウザーの既定値、通常は16pxに等しくなります。
3. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.4: Resize Text. WCAG 2.1 Understanding 1.4.4 — 内容や機能を失うことなく、テキストを最大200パーセントまで拡大できます。
4. World Wide Web Consortium (W3C). CSS Box Model Module Level 4. CSS Box Model Level 4 — パディングプロパティの負の値は無効です。