PX → REM 変換ツール
px（ピクセル）とrem単位を即座に相互変換します。基準フォントサイズを設定し、値を入力するだけ。よく使うpx値の早見表も表示されます。
PXとREM：レスポンシブでアクセシブルなデザインのためのCSS単位入門
CSSを書く際、適切な単位を選ぶことは開発者が行う最も重要な判断のひとつです。最もよく使われる長さの単位として、px（ピクセル）とrem（ルートem）があります。どちらもCSSスタイルシートでサイズを表しますが、動作は大きく異なります。いつどちらを使うべきかを理解することは、レスポンシブでアクセシブルなウェブインターフェースを構築するうえで不可欠です。このツールは両者を変換するのに役立ちますが、より深い価値は変換がなぜ重要なのかを理解することにあります。
CSSにおけるピクセル（px）とは
CSSにおけるピクセル（px）は絶対単位です。要素のフォントサイズを16pxに設定すると、ユーザーのブラウザ設定、画面解像度、親要素のサイズに関わらず、常に16ピクセルでレンダリングされます。この予測可能性は精密なコントロールが必要な場面で役立ちます。ボーダー、ボックスシャドウ、細かい装飾の詳細、ユーザー設定で変わってはいけないアイコンサイズなどです。
ただし、pxの硬直性はテキストやレイアウトのサイズ設定では欠点になります。ユーザーがアクセシビリティ設定でブラウザのデフォルトフォントサイズを大きくした場合（低視力への一般的な対応）、pxで指定された要素はそれに応答しません。ユーザーの設定が黙って無視される形となり、視覚障害を持つ方にとって使いにくさの原因になります。
CSS単位としてのREM
rem単位は「ルートem」の略です。ドキュメントのルート要素（<html>要素）のフォントサイズを基準とした相対単位です。ブラウザのデフォルトではルートフォントサイズが16pxに設定されているため、1remは16px、1.5remは24px、0.875remは14pxに相当します。ルートフォントサイズを変更すると、ページ上のすべてのrem値が比例してスケールします。
この相対的な動作がremの主な利点です。ユーザーがブラウザの最小フォントサイズを20pxに設定したり、読みやすさのためにベーステキストサイズを大きくしたりすると、rem単位でサイズ指定されたすべての要素が自動的にスケールアップします。レイアウトがユーザーの環境に適応するのであり、ユーザーの設定を上書きするのではありません。これがアクセシブルなタイポグラフィの基本です。
変換の計算式
pxとremの変換には基準フォントサイズ（<html>要素に適用されるフォントサイズ）を知る必要があります。計算式はシンプルです：REM = PX ÷ 基準フォントサイズ。逆方向の変換は：PX = REM × 基準フォントサイズ。
ブラウザのデフォルト16pxを基準とした場合の一般的な変換例：12px = 0.75rem、14px = 0.875rem、16px = 1rem、18px = 1.125rem、24px = 1.5rem、32px = 2rem。デザインシステムで異なるルートフォントサイズを設定している場合（例：html { font-size: 62.5%; }による10px）、計算は変わります。このツールでは任意の基準フォントサイズを設定できるので、プロジェクトの設定に合わせた正確な変換結果が得られます。
ルートフォントサイズ62.5%がよく使われる理由
多くの開発者がhtml { font-size: 62.5%; }と設定し、基準フォントサイズを10px（デフォルト16pxの62.5%）にします。10pxを基準にすると変換の計算が非常に簡単になります：16px = 1.6rem、24px = 2.4rem。このパターンは開発中の暗算を減らします。
トレードオフとして、body { font-size: 1.6rem; }などで読めるテキストサイズを復元し、コードベース全体で一貫性を保つ必要があります。このパターンを採用している場合は、このツールで基準フォントサイズに10を入力することで正しいrem値が得られます。デフォルトの16pxをそのまま使うチームは、基準を16のままにしておけばOKです。
REM vs EM：違いを理解する
remと似たem単位との違いも把握しておきましょう。em単位も相対単位ですが、ルートではなく親要素のフォントサイズを基準とします。そのためem値は複合します：親要素がfont-size: 1.2em、子要素もfont-size: 1.2emの場合、子の実効サイズはルートの1.44倍になります（1.2×1.2）。
この複合動作により、深くネストしたコンポーネントではemが扱いにくくなります。remは常にルートを基準とするため、この問題を完全に回避でき、より予測可能でメンテナンスしやすいです。ほとんどのユースケース、特にフォントサイズとグローバルな余白には、remがより安全で堅牢な選択肢です。
アクセシビリティとレスポンシブデザインへの恩恵
Webコンテンツアクセシビリティガイドライン（WCAG）は、ブラウザレベルのフォントスケーリングをサポートするために、テキストのサイズ指定にremなどの相対単位を使用することを推奨しています。難読症、低視力、または認知的な違いを持つユーザーは、システムをより大きなデフォルトテキストサイズで設定することが多いです。remベースのデザインはそれらの設定を尊重し、pxベースのデザインはそうではありません。
アクセシビリティの観点に加え、rem単位は一貫したレスポンシブデザインに貢献します。CSSカスタムプロパティや流動的タイポグラフィ技術（clamp()など）と組み合わせると、remベースのシステムはデバイスサイズ間でエレガントにスケールします。remベースの余白スケールが適切に設計されていれば、デスクトップで見栄えの良いレイアウトは、各余白値のブレークポイントごとの上書きなしに、モバイルやタブレットでも比例したリズムを維持します。
実践的なガイドライン
remを使う場面：フォントサイズ、行間、マージンとパディング、max-widthコンテナ、そしてデザインのスケールに参加すべきあらゆる余白。これらはremの比例動作が最も恩恵をもたらす値です。
pxを使う場面：ボーダーの幅（1pxのボーダーは1pxのまま）、ボックスシャドウ、アウトラインの幅、サブピクセルレンダリングと正確なピクセル値が重要なあらゆる装飾的な細部。これらのプロパティにpxを使ってもアクセシビリティは損なわれません。コンテンツに影響するサイズではなく、視覚的な装飾だからです。
実用的な判断基準：そのプロパティのサイズを変えると読みやすさや使いやすさに影響するか？ならばremを使う。装飾的な細部ならpxで問題ない。このガイドラインに従うことで、コードベースはよりアクセシブルで、スケーラブルで、デザインシステムが進化するにつれてメンテナンスしやすいものになります。
よくある質問
rem変換の基準となるデフォルトのフォントサイズは何ですか？
ブラウザのデフォルト基準フォントサイズは16pxで、1rem = 16pxとなります。CSSで明示的にhtml { font-size: ... }を変更していない限り、基準として16を使用してください。html { font-size: 62.5%; }を設定して10pxにしている開発者もいます。その場合は基準フォントサイズに10を入力してください。
フォントサイズにはpxよりremを使うべきですか？
remはユーザーのブラウザのフォントサイズ設定を尊重するため、アクセシビリティの観点から有利です。視覚障害や読字困難を持つユーザーはブラウザのデフォルトフォントサイズを大きくすることが多く、remで指定された要素はその設定に合わせてスケールしますが、pxで指定された要素はしません。フォントサイズとレイアウトの余白にはremがより包括的な選択です。
CSSでpxを使うのが適切な場面はありますか？
はい。ピクセル値はスケールしない正確な値が必要なプロパティに適しています：ボーダーの幅、ボックスシャドウ、アウトラインのサイズ、細かい装飾的な詳細などです。1pxのボーダーはフォントサイズの設定に関わらず1pxのままであるべきです。これらのプロパティにpxを使ってもアクセシビリティの問題は生じません。フォントサイズ、マージン、パディングなど読みやすさに影響するプロパティでのpxの使用を避けることが重要です。
ツールを使わずにremをpxに変換するには？
rem値に基準フォントサイズを掛け合わせます。標準の16px基準の場合：1.5rem × 16 = 24px。pxをremに変換するには基準で割ります：24px ÷ 16 = 1.5rem。基準が10px（62.5%のルート）の場合、計算はシンプルです：1.6rem × 10 = 16px。非標準の基準には、このツールで任意の値を変換できます。
CSSにおけるremとはどういう意味ですか？
REMは「ルートem」の略です。em単位が現在の要素の親要素のフォントサイズを基準とするのに対し、remは常にルート要素（<html>要素）のフォントサイズを基準とします。これにより、remはネストの深さによって値が変わらないため、emより予測しやすくなっています。1remの値は、ルートフォントサイズが変わらない限り、ドキュメント内のどこでも常に同じサイズです。