PX → REM
ピクセル値を REM 単位に変換、ルートフォントサイズを調整可能——リアルタイム変換と完全な対照表、100% ブラウザ内で完結。
入力
結果
対照表（1〜100 px）
| PX | REM | PX | REM |
|---|
REM とは？
REM（root em）は CSS3 で導入された相対長さ単位です。em 単位が要素自身のフォントサイズに対して相対的（ネスト時に累積する）なのに対し、rem は常にルート要素（<html> 要素）のフォントサイズに対して相対的です。1rem はルートの計算フォントサイズに等しく、ブラウザは既定で 16 ピクセルに設定します。そのため既定では 1rem = 16px、0.5rem = 8px、2rem = 32px となります。
rem は単一のルート基準に対して解決されるため、em 単位の累積問題を回避し、スタイルシート全体で予測可能でスケーラブルなサイズを実現します。デザイナーや開発者はルートフォントサイズという一つの値を変更するだけでインターフェース全体を比例的にスケールでき、これが rem が現代 CSS でタイポグラフィ・スペーシング・コンポーネントサイズの推奨単位となっている理由です。
PX と REM の比較
ピクセル（px）と rem（root em）はどちらも CSS の長さ単位ですが、アクセシビリティとレスポンシブスケーリングにおいて挙動が大きく異なります。それぞれのトレードオフを理解することで、状況に応じた適切な単位を選択できます。
| 特徴 | PX | REM |
|---|---|---|
| 種類 | 絶対単位 | 相対単位（ルートフォントサイズ基準） |
| デフォルト値 | 1px = 1/96 インチ | 1rem = 16px（ブラウザ既定） |
| ユーザー設定の尊重 | しない | する |
| ネスト時の累積 | しない | しない（ルート基準） |
| スケーラビリティ | 固定——値ごとに上書きが必要 | ルート変更で全体をスケール |
| 最適な用途 | ボーダー、細線、デバイスピクセル | フォントサイズ、スペーシング、レイアウト寸法 |
要するに、px はピクセル単位の正確な制御を提供しますがユーザーのブラウザフォントサイズ設定を無視し、rem はアクセシブルでスケーラブル、フォントとほとんどのレイアウトスペーシングに適しています。多くのチームはハイブリッド方式を採用し、フォントとスペーシングには rem、細いボーダーと固定装飾要素には px を使用します。
ルートフォントサイズ
ルートフォントサイズは <html> 要素に宣言されたフォントサイズで、すべての rem 値が解決される唯一の参照点です。ブラウザは既定で 16px ですが、CSS で上書きできます——多くのデザインシステムがそうしています。例えば html { font-size: 62.5%; } で 1rem を 10px にし、暗算を簡単にします（1.4rem = 14px）。
このコンバーターでは 8px 〜 32px の任意のルートフォントサイズを設定でき、プロジェクトのルート設定に合った rem 値を計算できます。スライダーでルートサイズを変更すると、結果と対照表全体が即座に再計算され、常に設定に応じた正しい変換が表示されます。
REM を使うべき場面
REM は現代のアクセシブルな Web デザインにおいて、ほとんどのサイズ設定に推奨される単位です。値がユーザーのフォントサイズ設定やグローバルなデザイントークンの変更に連動してスケールすべき場合は、常に rem を使用します。最も一般的なユースケースは以下の通りです：
- タイポグラフィ。
font-sizeを rem で設定し、見出し・段落・本文がすべてユーザーのブラウザフォント設定を尊重するようにします。 - スペーシングと余白。マージン・パディング・ギャップに rem を使い、レイアウト全体が比例してスケールするようにします。
- コンポーネント寸法。rem で定義したボタン・カード・モーダル幅は、ルートサイズに応じてスケールします。
- メディアクエリ。rem で書かれたブレイクポイントは、ビューポート幅だけでなくユーザーのフォント設定にも応答します。
- デザインシステム。rem で表現されたスペーシングスケール（4px / 8px / 16px…）がグローバルに再スケール可能なトークンになります。
ボーダー（1px の細線）、デバイスピクセル精度が必要なグラフィック、ルートフォントサイズ変更時に変わるべきでない値には px を使います。
REM とレスポンシブデザイン
REM はレスポンシブでアクセシブルなデザインの基盤です。rem 値はルートフォントサイズから派生するため、1 つの宣言を変更するだけでインターフェース全体を再スケールできます。一般的なパターンは clamp() 関数でルートフォントサイズを設定し、ビューポートに応じて流動的に拡大させることです：html { font-size: clamp(16px, 2vw, 20px); }。rem ベースのすべての寸法が、追加のメディアクエリなしでモバイルからデスクトップへスムーズにスケールします。
rem ベースのタイポグラフィとスペーシングを、レイアウトには vw や % などの相対単位と組み合わせることで、サイトはあらゆるデバイスで優雅に適応しつつ、ユーザーのアクセシビリティ設定を尊重します。これが Tailwind、Bootstrap 5、Material Design など現代の CSS 手法の多くが、スペーシングとタイプスケールをデフォルトで rem で提供している理由です。
PX を REM に変換するには？
ピクセル値をルートフォントサイズで割ります：rem = px ÷ ルートフォントサイズ。既定の 16px ルートでは、24px は 24 ÷ 16 = 1.5rem になります。
デフォルトのルートフォントサイズは？
すべての主要ブラウザは <html> 要素に既定で 16px を設定するため、既定では 1rem = 16px です。
ルートを 62.5% に設定するプロジェクトがあるのはなぜ？
html { font-size: 62.5%; } を設定すると 1rem = 10px になり、暗算が簡単になります（1.6rem = 16px）。その後 body フォントを読みやすいサイズにリセットします。
REM は EM より優れていますか？
ほとんどの場合はい——rem はルート基準でネスト時に累積しないため、より予測可能です。em はコンポーネントが自身のフォントサイズに合わせてスケールすべき場合に有用です。
値はサーバーに送信されますか？
いいえ。すべての計算はブラウザ内でローカルに実行され、何もアップロードされません。