PX → REM変換ツール

ピクセル値をルートフォントサイズで割ります：rem = px ÷ ルート。ブラウザデフォルトの16pxルートの場合、16px ÷ 16 = 1rem、24px ÷ 16 = 1.5rem、40px ÷ 16 = 2.5remとなります。上の変換ツールにpx値を入力すると、remフィールドが即座に更新されます——暗算は不要です。62.5%トリック（10pxルート）の場合は10で割るだけです：24px = 2.4rem。

rem値にルートフォントサイズをかけます：px = rem × ルート。デフォルトの16pxルートの場合、1rem × 16 = 16px、1.5rem × 16 = 24px、0.875rem × 16 = 14pxとなります。変換ツールのremフィールドを編集すると、pxフィールドが即座に追随します。ツールは完全に双方向対応です——わかっている値を入力すれば、残りは自動で更新されます。

1remはルート（html）要素のフォントサイズと等しくなります。Chrome・Safari・Firefox・Edgeを含むすべての主要ブラウザでは、デフォルトが16pxのため1rem = 16pxとなります（ルートが変更されていない場合）。ルートを10px（62.5%トリック）に設定した場合、1remは10pxになります。ユーザーがブラウザの設定でデフォルトのテキストサイズを変更した場合も、そのユーザーにとっての1remの値が変わります——これがフォントサイズにpxよりremの方が適している理由です。

0.875remは標準の16pxルートでは14pxに相当します（0.875 × 16 = 14）。これはCSSフレームワークで最もよく使われるrem値の一つです——Tailwind CSSのtext-smクラスは0.875rem（14px）です。10pxルート（62.5%トリック）の場合、0.875remは8.75pxとなります。

pxは絶対的な固定単位で、ユーザーの設定や画面サイズに関わらず16pxは常に16pxです。remは相対単位で、ルート（html）要素のフォントサイズの倍数です。デフォルトでは1rem = 16pxですが、ユーザーがアクセシビリティ設定でブラウザのベーステキストサイズを拡大すると比例して大きくなります。remベースのレイアウトはアクセシビリティの面で優れており、ユーザーが大きなテキストを要求した際にテキストが比例して拡大しますが、px指定のテキストは固定されたまま小さすぎて読めなくなる可能性があります。

pxは固定値です。remはルート（html）フォントサイズを基準とした相対単位で、ページ全体に一貫した基準点を提供します。emは自身の親要素のフォントサイズを基準とするため、要素をネストすると値が複合されます：20pxの親要素に1.5emの子要素を置くと子要素は30pxになります。同じ子要素を1.5remにすると、親のサイズに関わらず24px（1.5 × 16pxルート）になります。16pxルートでネストなしの場合、16px・1rem・1emはすべて等しくなります——違いが現れるのは親要素のフォントサイズが変化したときです。

アクセシビリティの観点から、フォントサイズにはremの方が優れています。視覚障害を持つユーザーがブラウザのデフォルトテキストサイズを拡大した場合（よくあるアクセシビリティニーズ）、remベースのフォントサイズはすべて追随してスケールしますが、px値は固定されたままです。WCAG 2.1ガイドライン1.4.4（テキストのサイズ変更）では、機能を損なうことなく200%までテキストをリサイズできることを求めています——remを使えばこれを容易に達成できます。スケールさせたくないもの（1pxのボーダーや固定サイズのアイコンなど）にのみpxを使いましょう。

62.5%トリックとは、ルート（html）フォントサイズを62.5%に設定するテクニックです——ブラウザデフォルトの16pxの62.5%が10pxになります。これにより、rem計算が非常に簡単になります：1.6rem = 16px、2.4rem = 24px、3.2rem = 32px。すべてのrem値が10の倍数にきれいに対応します。こちらでルートフォントサイズを10pxプリセットに切り替えると、変換ツールと参照テーブルが即座に再計算され、わかりやすい対応関係を確認できます。トレードオフとして、ルートサイズがユーザーのブラウザデフォルトを上書きするため、アクセシビリティがわずかに低下します。

標準の16pxルートの場合：10px = 0.625rem、12px = 0.75rem、13px = 0.8125rem、14px = 0.875rem、16px = 1rem、18px = 1.125rem、20px = 1.25rem、24px = 1.5rem、28px = 1.75rem、32px = 2rem、40px = 2.5rem、48px = 3remとなります。ツール内の参照テーブルにはよく使う値がすべて掲載されており、各値をワンクリックでコピーできます——毎回手動で計算するより速いです。

Tailwind CSSはデフォルトで16pxルートを使用してほぼすべてのサイズ値にrem単位を採用しています。Tailwindのスペーシングスケール：1単位 = 0.25rem = 4px。つまりspace-4 = 1rem = 16px、space-6 = 1.5rem = 24px、space-8 = 2rem = 32px。タイポグラフィでは：text-sm = 0.875rem（14px）、text-base = 1rem（16px）、text-lg = 1.125rem（18px）、text-xl = 1.25rem（20px）、text-2xl = 1.5rem（24px）。このツールを使えば、カスタムのpx値をTailwindのremベースシステムとすぐに照合できます。

はい、完全に使用できます。変換ツールはブラウザ内でJavaScriptとして完全に動作します——サーバーとの通信なし、APIコールなし、データのアップロードなしです。ページが一度読み込まれれば、オフラインでも動作します。入力した値はお使いのデバイスの外に出ることはありません。ブックマークしておけば、飛行機内・トンネル内・インターネット接続のない場所でのコーディング中でも使用できます。サーバーには何も保存されません。

ルートフォントサイズフィールドに任意の値を入力するか、16px（ブラウザデフォルト）または10px（62.5%トリック）のプリセットボタンを使用してください。テーブルとアクティブな入力フィールドのすべてのrem・em・pt変換が、新しいルートに合わせて即座に再計算されます。CSSで<code>html { font-size: 18px; }</code>と設定している場合、ルートに18を入力すると、プロジェクト固有のスケールに合った正確な変換結果が得られます。