PXからREMへの変換器

PXからREMへの変換器は、プロジェクトで実際に使っているルートフォントサイズを基準に、ピクセル値をremまたはem単位へ、またその逆へ変換します。1つの値でもタイプスケール全体でも入力でき、変換結果、元のピクセル値をコメントとして残したコピー用CSSブロック、各サイズを実寸で表示する定規、訪問者がブラウザのフォントサイズを大きくしたときにrem値がどう反応するかのプレビューを確認できます。

PXからREMへの計算式

ピクセルとremの変換は1回の割り算で行えます。必要なのは文書のルートフォントサイズだけです。

ブラウザのデフォルトルートが16pxなら、24px ÷ 16 = 1.5remおよび1.5rem × 16 = 24pxとなります。スタイルシートでhtml { font-size: 62.5%; }を設定すると、ルートは10pxになり、同じ24pxは2.4remになります。

PXからREMへの変換表（ルート16px）

remとemの違い: ネストですべてが変わる

remはルート要素（html）を基準に測定されるため、文書内のどこでも同じ意味になります。emは親要素の計算済みフォントサイズを基準に測定されるため、同じem値をネストすると累積します。この図は、16pxのルートから始めて、同じ1.5の倍率を3階層にわたって適用したものです。

多くのチームが採用する実用的なルールは、フォントサイズ、レイアウトの間隔、ブレークポイントにはremを使い、ボタン内のパディングやテキストの隣に置くアイコンのサイズなど、コンポーネント自身に合わせて拡大縮小したいものにはemを意図的に使うことです。

pxではなくremを使う理由

• アクセシビリティ。ブラウザのデフォルトフォントサイズを20pxに設定した訪問者には、remベースのサイズがすべて比例して大きく表示されます。pxで固定したサイズは、その設定を完全に無視します。
• 全体を一括で拡大縮小する1つのつまみ。メディアクエリでルートフォントサイズを変更すると、コンポーネントごとの上書きなしに、タイプスケールと間隔のリズム全体を一緒に変更できます。
• 一貫した間隔のリズム。パディングとマージンをremで表すと、縦方向のリズムがタイプスケールに結び付き、ばらばらになるのを防げます。
• デザイントークンと相性がよい。現代のデザインシステム（Tailwindのデフォルトスケールを含む）はサイズをremで公開しているため、既存のpx値を変換すると引き継ぎが簡単になります。

62.5%のルートフォントサイズの方法

多くのチームは、1remを分かりやすい10pxにして暗算を簡単にするため、次のルールを追加します。

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* 読みやすい16pxに戻す */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

62.5%は固定ピクセル値ではなくブラウザのデフォルトに対する割合なので、訪問者のフォントサイズ設定にも対応します。覚えておくべき点は、bodyをおよそ1.6remに戻さないと、デフォルトテキストが10pxで表示されることです。この設定に対して変換するには、上のルートフォントサイズ欄を10に設定してください。

メディアクエリ内のrem

メディアクエリ内では、remはCSSで設定したhtmlのフォントサイズではなく、ブラウザの初期ルートフォントサイズを基準に解決されます。そのため、スタイルシートでhtml { font-size: 10px }と宣言していても、@media (min-width: 48rem)は常に768pxです。これによりremのブレークポイントは安全で予測しやすくなります。また、emとremが同じように動作する数少ない場所の1つでもあります。

それでもpxを使うべき場合

• 極細の境界線と区切り線 — 1pxの境界線は1pxのままにすべきです。拡大するとぼやけたサブピクセルの線になります。
• 固定サイズのアセット — スプライトのオフセット、正確な影のオフセット、既知の固有サイズを持つ画像。
• キャンバスと印刷出力 — 物理的なサイズやデバイスピクセルの測定値が本当に必要な場合。

この変換器の使い方

1. 方向を選択: px → rem、rem → px、px → em、em → px。
2. 値を入力: 1つの数値、またはカンマや空白で区切ったスケール全体（1回につき最大20個）。24pxのように末尾に単位が付いた値も受け付け、単位は無視します。
3. ルートフォントサイズを設定: ブラウザのデフォルトには16のままにするか、プリセットのチップで10（62.5%の方法）、12、14、18、20を選びます。
4. 変換をクリック: 結果表、実寸サイズの定規、アクセシビリティプレビュー、CSSブロックを確認します。
5. CSSをコピー: 1つのボタンですべてのfont-size宣言をコピーできます。元のピクセル値はコメントとして残ります。

よくある質問

pxをremに変換するには？

ピクセル値をルートフォントサイズで割ります。ブラウザのデフォルトルートが16pxなら、24px ÷ 16 = 1.5remです。逆方向ではrem値にルートフォントサイズを掛けます。1.5rem × 16 = 24pxです。

1remは何pxですか？

1remはページのルートフォントサイズと同じです。主要ブラウザのデフォルトは16pxなので、html要素や訪問者のブラウザ設定が変更されない限り、1remは16pxです。

remとemの違いは何ですか？

remは常にhtml要素のルートフォントサイズを基準にするため、文書内のどこでも1.5remは同じサイズです。emは要素自身の親のフォントサイズを基準にするため、ネストされた要素では値が累積します。別の1.5emの中にある1.5emは基準サイズの2.25倍で表示されます。

62.5%のルートフォントサイズの方法とは？

html { font-size: 62.5%; }を設定すると、ルートは16pxではなく10pxになり、1remは10pxになります。暗算も簡単で、24pxは2.4remです。62.5%は絶対的なピクセル値ではなく相対値なので、訪問者のブラウザのフォントサイズ設定に応じて拡大縮小します。

フォントサイズにはpxとremのどちらを使うべきですか？

フォントサイズ、間隔、メディアクエリにはremを使い、訪問者がブラウザのデフォルトフォントサイズを大きくしたときにレイアウトも拡大するようにします。拡大縮小させない値にはpxを使い、極細の境界線、1pxの区切り線、一部の影のオフセットなどに限定します。

remの値は丸い数値にする必要がありますか？

いいえ。ブラウザは小数のrem値を問題なく扱い、内部でサブピクセルサイズを計算します。きりのよい数値がよければ、10pxや8pxなど、スケールを均等に割れるルートフォントサイズを選ぶか、この変換器の小数点以下の桁数オプションを使ってください。

remはpadding、margin、メディアクエリに使えますか？

はい。remはCSSが長さを受け付ける場所ならどこでも使えます。padding、margin、width、gap、border-radiusなどが含まれます。メディアクエリでは、remはカスタムのhtmlフォントサイズではなく初期の16pxルートを基準に解決されるため、48remのブレークポイントは常に768pxです。

追加リソース

• CSSの長さ単位 - MDN
• フォント相対長 - W3C CSS Values