px → rem 変換ツール — ピクセルを rem へ、即時・プライベート

ルート font-size をカスタマイズして px を rem に即変換。デフォルトで 16px = 1rem。双方向のリアルタイム変換、コピー対応、すべてブラウザ内で処理。

トラッキングなしブラウザで動作無料

ルート font-size

ピクセル（px）

Rem（rem）

プレビュー

いろはにほへとちりぬるを

CSS の rem 単位の正確性とアクセシビリティ指針の観点でレビュー済み — Go Tools エンジニアリングチーム · Jun 11, 2026

クイックリファレンス

16px は何 rem ですか？

16px = 1rem（16px 基準） ブラウザのデフォルトである 16px ルート font-size では、16px はちょうど 1rem に等しくなります。これが他のすべての変換の基準点です: rem = px ÷ 16。

px → rem の式は？

rem = px ÷ ルート font-size ピクセル値をルート font-size で割ります。例えば 24px ÷ 16 = 1.5rem。プロジェクトが 16px を使わない場合はツールの基準値を変更してください。

62.5% テクニックとは？

62.5% → 1rem = 10px html { font-size: 62.5% } を設定するとルートが 10px になり、1rem = 10px となって rem の計算は「10 で割るだけ」になります。使うにはこのツールの基準値を 10 に設定してください。

px → rem 変換ツールとは？

px → rem 変換ツールは、ピクセルの寸法を CSS 用の rem 単位に変換します。rem（"root em"）単位はルートの要素の font-size を基準とします: 1rem は常にルート font-size に等しく、ブラウザはこれをデフォルトで 16px に設定します。変換は単純な割り算 — rem = px ÷ ルート font-size — ですが、スタイルシート内のすべてのフォントサイズ・margin・ブレークポイントを手作業で計算するのは面倒でミスが起きやすく、このツールはその手間を取り除きます。

そもそも変換する理由はアクセシビリティとスケーラビリティです。値が px で書かれていると、固定サイズに固定され、ユーザーのブラウザのフォントサイズ設定を無視します。rem で書かれていると、ユーザーがデフォルトのフォントサイズを大きくしたときに比例してスケールします — 弱視の人にとって不可欠な配慮であり、ズームするすべての人にとってより快適な体験です。デザインシステムを rem で表現すれば、ルート font-size を 1 回変更するだけでインターフェース全体が一貫して再スケールします。

この変換ツールはピクセル欄と rem 欄をリアルタイムで連動させるので、どちらの方向にも移動でき、— 16px 基準を固定するツールとは違って — 任意のルート font-size を設定できます。これが重要なのは、62.5% テクニック（10px ルート）を使うスタイルシートはデフォルトの 16px 設定とは異なる変換になるからです。ライブプレビューが変換後のテキストサイズを示し、参照表が素早く調べられるよう 16px 基準での最も一般的な px 値を一覧表示します。

逆方向が必要ですか？rem → px 変換ツールを使ってください。スタイルシート自体を整えるにはCSS フォーマッターを、色の作業にはカラー変換ツールをお試しください。すべてブラウザ内で動作します — あなたの値が端末を離れることはありません。

/* The core formula */
/* rem = px ÷ root-font-size (16px by default) */

:root {
  font-size: 16px; /* 1rem = 16px */
}

.title  { font-size: 1.5rem;  } /* 24px */
.body   { font-size: 1rem;    } /* 16px */
.caption{ font-size: 0.75rem; } /* 12px */
.card   { padding: 1.5rem;    } /* 24px */

/* JavaScript equivalent */
const pxToRem = (px, base = 16) => px / base;
console.log(pxToRem(24)); // 1.5
console.log(pxToRem(12)); // 0.75

この px → rem 変換ツールの主な機能

カスタムなルート font-size

16px だけでなく任意の基準値に対して変換できます。62.5%（10px）テクニックやプロジェクトの実際のルート font-size に合わせられます — ほとんどのツールは 16 を固定しています。

リアルタイムの双方向変換

ピクセル欄と rem 欄がリアルタイムで連動します。どちらかを編集すると、もう一方が選択した基準値に対して即座に更新されます。

サイズプレビュー内蔵

プレビュー行が変換後の rem サイズでテキストを描画するので、数値だけでなくスケール感を確認できます。

ワンクリックコピー

px または rem の値をワンクリックでクリップボードにコピーし、そのまま CSS に貼り付けられます。

参照用の変換表

16px 基準での最も一般的な px 値とその rem 換算を載せた一覧表で、入力なしで素早く調べられます。

100% ブラウザ内・プライベート

すべての計算がブラウザ内でローカルに行われます。サーバーへのリクエストも、トラッキングも、データ保存もありません — あなたの値が端末を離れることはありません。

px → rem 変換の例

本文テキスト — 16px を rem へ

1rem

デフォルトの 16px ルート font-size では、16px はちょうど 1rem に等しくなります。これは他のすべての変換の基準点です: rem = px ÷ 16。

見出し — 24px を rem へ

1.5rem

24px の見出しは 1.5rem になります（24 ÷ 16 = 1.5）。rem を使うと、ユーザーがブラウザのデフォルトフォントサイズを変更したときに見出しが自動的にスケールします。

小さなラベル — 12px を rem へ

0.75rem

12px は 16px 基準で 0.75rem です。注釈やキャプションは、読者のフォントサイズ設定を尊重するために rem にする典型的な候補です。

余白 — 8px を rem へ

0.5rem

8px は 0.5rem に等しくなります。多くのデザインシステムでは、余白がテキストと一緒にスケールするよう padding や margin を rem で表現します。

62.5% テクニック — 10px 基準、18px を rem へ

1.125rem

ルート font-size を 10px に設定すると（62.5% テクニック）、18px は 1.8rem になります。デフォルトの 16px 基準では、18px は 1.125rem です。常にプロジェクトが実際に使う基準値に対して変換してください。

ブレークポイント — 768px を rem へ

48rem

768px のメディアクエリ・ブレークポイントは 16px 基準で 48rem です。rem ベースのブレークポイントは、ユーザーがテキストを拡大したときにより予測どおりにズームします。

よくある px 値を rem に変換する方法

開発者が最もよく rem に変換する px 値のクイックリファレンス（デフォルトの 16px ルート font-size）。

16px を rem に変換する方法

16 px → 1 rem

16 を 16px のルート font-size で割ると 1rem になります。16px は基準値です — デフォルト設定でちょうど 1rem に等しく、これが他のすべての変換の基準点になる理由です。

16 px → 1 rem

16px = 1rem を覚えましょう。そこから半分にすれば 0.5rem（8px）、倍にすれば 2rem（32px）です。