REM → PX
REM 単位をピクセルに変換、ルートフォントサイズを調整可能——リアルタイム変換と完全な対照表、100% ブラウザ内で完結。
入力
結果
対照表（0.25〜8 rem）
| REM | PX | REM | PX |
|---|
PX とは？
ピクセル（px）は CSS における最も基本的な絶対長さ単位です。1 CSS ピクセルは 1/96 インチと定義され、物理的な画面密度に関係なく 1 インチあたり 96 ピクセルとなります。CSS ピクセルは論理的な抽象概念であり、高 DPI ディスプレイは複数の物理デバイスピクセルを 1 つの CSS ピクセルにまとめる場合がありますが、CSS の測定は常にこの論理単位で行われ、デバイスをまたいで一貫した視覚サイズでレンダリングされます。
ピクセルはデザイナーにすべての寸法に対する正確で予測可能な制御を提供します。他の CSS 単位が変換される際の普遍的な参照点であり、rem や em などの相対単位も最終的には計算スタイルでピクセルに解決されます。px は絶対単位であるため、ボーダー、細い区切り線、アイコン寸法、ユーザーのフォントサイズ設定に関わらず固定すべき値に自然な選択です。
REM と PX の比較
REM と PX は同じコインの裏表であり、すべての rem 値はレンダリング時にピクセル値に解決されます。違いは、サイズがルートフォントサイズに対して相対的（rem）か絶対値（px）かです。下表は主要な違いをまとめたものです。
| 特徴 | REM | PX |
|---|---|---|
| 種類 | 相対（ルートフォントサイズ基準） | 絶対 |
| 16px ルート時の既定 | 1rem = 16px | 1px = 1/96 インチ |
| ユーザー設定の尊重 | する | しない |
| グローバル再スケール | ルート変更で全体をスケール | 値ごとに変更が必要 |
| 予測可能性 | ルートに依存 | 常に正確 |
| 最適な用途 | フォントサイズ、スペーシング、レイアウト | ボーダー、細線、固定グラフィック |
レンダリング後のピクセル値を知る必要がある場合、rem を px に変換することが不可欠です——例えばピクセル精度の実装へのデザイン引き継ぎ、計算スタイルのデバッグ、ピクセル値のみを受け付けるツールの使用など。変換は単に px = rem × ルートフォントサイズ です。
ルートフォントサイズ
ルートフォントサイズは <html> 要素に設定されたフォントサイズで、1rem が何ピクセルに等しいかを決定します。すべての主要ブラウザは既定で 16px なので、既定では 1rem = 16px です。多くのプロジェクトがこれを上書きし、一般的な手法は html { font-size: 62.5%; } で 1rem を 10px にし、コードベース全体の暗算を簡単にします。
このコンバーターでは 8px 〜 32px のルートフォントサイズを設定でき、ピクセル出力が常にプロジェクトの実際のルート設定に一致します。スライダーを動かすと結果と対照表全体が即座に再計算され、特定の設定下で任意の rem 値の正確なピクセル値を確認できます。
REM を PX に変換する場面
rem はほとんどの現代 CSS で推奨単位ですが、同等のピクセル値が必要な場面は多数あります。以下の場合に rem から px への変換が有用です：
- デザイン引き継ぎ。デザイナーは Figma や Sketch でピクセル単位で作業することが多く、rem 値を px に変換することで開発者とデザイナーが同じ言語を話せます。
- 計算スタイルのデバッグ。ブラウザの DevTools は計算された rem 値をピクセルで表示し、手動変換で計算を検証できます。
- ピクセル精度の実装。一部のサードパーティライブラリ、Canvas API、ネイティブ連携はピクセル値のみを受け付けます。
- ドキュメント作成。スタイルガイドで rem と px の両方を表示すると、デザインシステムが新規参加者に分かりやすくなります。
- 移行プロジェクト。従来の px ベースのコードベースを rem に移行（またはその逆）する際、一括変換で値の監査と書き換えが容易になります。
ピクセル等価値を得た後も、ソース CSS には rem 値を保持してください——rem はよりアクセシブルでスケーラブルな選択であり続け、px 値は参考として使います。
アクセシビリティと PX
rem が存在する重要な理由の一つはアクセシビリティです。ユーザーがブラウザ設定でデフォルトフォントサイズを大きくすると、rem ベースのすべての測定がそれに応じてスケールし、テキストとスペーシングが読みやすい状態を保ちます。ピクセル値はほとんどの現代ブラウザでこの設定に連動しません（現在はページ全体をズームします）、そのため px で宣言されたフォントは一部の環境で快適な読書サイズをユーザーから奪う可能性があります。
とはいえ、px が本質的に悪いわけではありません——1px のボーダー、box-shadow のオフセット、装飾的なジオメトリなど、フォント設定に応じて変化すべきでない値に適しています。ベストプラクティスは、タイポグラフィとレイアウト関連（スケールが望ましいもの）には rem を、固定の構造的ディテールには px を使うことです。このコンバーターは両者間の変換を助け、各単位を最も適した場所に適用できるようにします。
REM を PX に変換するには？
rem 値にルートフォントサイズを掛けます：px = rem × ルートフォントサイズ。既定の 16px ルートでは、1.5rem は 1.5 × 16 = 24px になります。
どのルートフォントサイズを使うべき？
プロジェクトが明示的に上書きしない限り 16px（ブラウザ既定）を使います。スタイルシートで html { font-size: 62.5%; } を設定している場合は 10px をルートにします。
1rem は常に 16px ですか？
ブラウザ既定の 16px ルートの場合のみです。ルートフォントサイズが CSS で変更されたりユーザーによって調整された場合、1rem はその新しい値になります。
CSS では PX と REM のどちらを使うべき？
フォントサイズ・スペーシング・レイアウト寸法には rem を使い、ユーザー設定に連動してスケールさせます。ボーダー、細線、固定装飾値には px を使います。
値はサーバーに送信されますか？
いいえ。すべての計算はブラウザ内でローカルに実行され、何もアップロードされません。