コンテンツにスキップ
🛠️
Whiz Tools

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

PX・REM・EM単位コンバーターは、CSSで使うピクセル、rem、em単位を相互に変換する無料ツールである。ピクセル、rem、emのいずれかの値を入力すると、指定したルートフォントサイズと親要素のフォントサイズに基づき、残り2つの単位の値へリアルタイムに換算する。

PX、REM、EM単位変換ツール

ピクセル（PX）、ルートエム（REM）、エム（EM）単位間で変換します。任意のフィールドに値を入力すると、他の単位の同等の値が表示されます。

px
px
px
rem
em
マイナスまたはゼロ値の場合、視覚化は利用できません

変換式

  • PXからREM：px値 ÷ ルートフォントサイズ
  • PXからEM：px値 ÷ 親要素のフォントサイズ
  • REMからPX：rem値 × ルートフォントサイズ
  • EMからPX：em値 × 親要素のフォントサイズ
ローディング計算機...
📚

ドキュメンテーション

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

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

px、rem、emとは？

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

rem（「ルートem」）は、ページのルート要素（通常は<html>タグ）のフォントサイズに応じて変化する単位です。ほとんどのブラウザーでは、サイト側で変更しない限り、ルートのフォントサイズは16pxに設定されています。ルートのフォントサイズが16pxなら、1remは16pxに相当します。

emは、親要素（その要素を含む要素）のフォントサイズに応じて変化する単位です。親要素のフォントサイズがfont-size: 20pxなら、その親要素内の1emは20pxに相当します。

remとemの主な違いは、それぞれが基準にする対象です。remは常にルート要素を基準にします。emは最も近い親要素を基準にするため、入れ子の各階層で値が変わることがあります。

pxをremに変換する方法

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

r=pRr = \frac{p}{R}

r は rem 単位での長さ、p はピクセル単位での長さ、R はピクセル単位でのルートフォントサイズを表します。

計算例

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

24 ÷ 16 = 1.5rem

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

24 ÷ 10 = 2.4rem

remをpxに変換する方法

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

p=r×Rp = r \times R

p はピクセル単位での長さ、r は rem 単位での長さ、R はルートフォントサイズを表します。

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

pxをemに変換する方法

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

e=pPe = \frac{p}{P}

e は em 単位での長さ、P はピクセル単位での親要素のフォントサイズを表します。

計算例

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

24 ÷ 20 = 1.2em

emをpxに変換する方法

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

p=e×Pp = e \times P

p はピクセル単位での長さ、e は em 単位での長さ、P は親要素のフォントサイズを表します。

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

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

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

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

R はルートフォントサイズ、P は親要素のフォントサイズを表します。

計算例

ルートのフォントサイズが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. 残り2つの欄は、自動的に小数点以下4桁に丸められて更新されます。
  3. プロジェクトの<html>要素に合わせてルートのフォントサイズを設定します。ほとんどのブラウザーではデフォルトで16pxで、remにのみ影響します。
  4. emの値が入る要素のフォントサイズに合わせて、親要素のフォントサイズを設定します。emにのみ影響します。
  5. 欄の横にあるコピー用ボタンを使うと、その値をコピーできます。

どちらのフォントサイズ欄もピクセル単位の整数を受け付け、設定できる最小値は1pxです。 リセットボタンを押すと値が消去され、両方のフォントサイズが16pxに戻ります。

欄の下には、単位ごとに1本のバーが表示されます。3本のバーはすべて同じ 物理的な長さを表すため、幅も同じになり、変換 が正しいかをすぐ確認できます。バーは300pxまでは実際のピクセル長で描画され、それを超える長さ は収まるように縮小されます。そのため、600pxの値も900pxの値も、最終的には300pxになります。バー は、ピクセル値が0より大きい場合にのみ表示されます。

よくある質問

remとemの違いは何ですか？ Remは常にルート要素のフォントサイズを基準にします。Emは最も近い親要素のフォントサイズを基準にします。remの値はページ上のどこでも変わりませんが、emの値は要素がどれだけ深く入れ子になっているかによって変わることがあります。

ブラウザーがデフォルトのフォントサイズに16pxを使うのはなぜですか？ 16pxは、特別なスタイル設定がなくても一般的な画面で読みやすいサイズであるため、主要なブラウザーで長く標準のテキストサイズとされてきました。ウェブアクセシビリティの指針では、ページのレイアウトを崩さずにテキストを200%まで拡大できることが推奨されており、16pxはそのための実用的な出発点です。

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

px、rem、emの値は負数にできますか？ マージンやCSSトランスフォームなど、負の長さを受け付けるプロパティでは可能です。CSSではパディングを負数にできず、ブラウザーは負のパディング値を無視します。コンバーターは負の値を処理しますが、バーは負の幅を持てないため表示しません。

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

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