PX⇔REM変換ツール（ルート要素のfont-size基準）
px指定のサイズをrem単位に、rem指定のサイズをpxに相互変換する無料ツール。ルート要素（html）のfont-size（基準値）を自由に変更して換算結果を確認できます。
px→rem 早見表（基準16px）
ルート要素のfont-sizeが16px（ブラウザの初期値）の場合の、よく使うpx値とrem値の対応表です。
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
PX⇔REM変換とは
remは「root em」の略で、ルート要素（）のfont-sizeを1として計算される相対単位です。ブラウザの初期値では1rem = 16pxですが、ルート要素のfont-sizeを変更すると、同じrem値でも実際のpx換算値が変わります。
CSSでpxではなくremを使うと、ユーザーがブラウザの文字サイズ設定を変更したときに、remで指定した要素のサイズも連動して拡大・縮小されます。アクセシビリティ対応やレスポンシブデザインでremの使用が推奨される理由はこの連動性にあります。一方、Figma等のデザインカンプはpx単位で作られることが多く、実装時にpxからremへの換算が必要になります。
使い方
- 基準値を確認する デフォルトは16px（ブラウザの初期値）です。プロジェクトのCSSでルート要素のfont-sizeを変更している場合はその値に書き換えます。
- px値またはrem値を入力する どちらかの欄に数値を入力すると、もう一方の欄が自動的に換算されます。
- 生成されたCSSをコピーする 「CSSをコピー」ボタンで、font-sizeプロパティの記述をそのままコピーできます。
使いこなすためのヒント
- ブラウザの初期設定では1rem = 16pxですが、視覚障害のあるユーザーがブラウザ側で文字サイズを大きく設定している場合、実際のpx換算値はもっと大きくなります。remを使うとこの設定に自動で追従できます。
- メディアクエリ（@media）の幅指定には歴史的にpxが使われることが多いですが、font-sizeやpadding・marginなどの余白指定にはremを使うと、ユーザー設定に応じて全体のバランスが保たれやすくなります。
- CSSで html { font-size: 62.5%; } のように指定すると、1rem = 10pxになり、rem値がそのままpx値の10分の1になるため頭の中で換算しやすくなるテクニックもあります（この場合、基準値の欄に10を入力すると同じ計算を確認できます）。
- 1つのプロジェクト内でremとpxを混在させる場合は、コンポーネントの内部の余白（padding等）はem、ページ全体のレイアウトに関わる値はremのように役割を分けるとメンテナンスしやすくなります。
用語集
- rem
- root emの略。ルート要素（）のfont-sizeを基準とする相対単位で、ルート要素の設定を変えると連動してサイズが変わります。
- em
- 親要素のfont-sizeを基準とする相対単位。remと似ていますが、ネストした要素ごとに基準が変わるため、複数階層で使うと計算が複雑になりやすい点がremとの違いです。
- px（ピクセル）
- 画面上の物理的な点（ピクセル）を基準とする絶対単位。ブラウザの文字サイズ設定やズームの影響を受けにくく、寸法を厳密に固定したい場合に使われます。
- ルート要素のfont-size
- 要素に指定されたfont-size。ブラウザの初期値は16pxですが、CSSでhtml { font-size: ... }と指定すると変更できます。remの計算の基準になります。
よくある質問
余談ですが ― remがCSS仕様に登場するまで
remという単位がCSSの仕様（CSS Values and Units Module）に初めて登場したのは2011年頃で、それ以前のWebページはほぼすべてpxまたはemでサイズを指定していました。当時のemには「入れ子になるほど基準がずれていく」という扱いにくさがあり、複雑なレイアウトほど意図しないサイズになりがちでした。
remはこの問題を解決するために考案された単位です。ルート要素という「常に1つしか存在しない基準」を参照するため、どれだけ要素が入れ子になっても計算がずれません。Internet Explorer 9がremに対応していなかった時期は、px値と併記してフォールバックさせる書き方（font-size: 16px; font-size: 1rem;）が一般的でしたが、主要ブラウザが対応した2010年代半ば以降はrem単体で書けるようになりました。
近年では、アクセシビリティの観点からWebサイト全体のフォントサイズやレイアウトの余白をremで統一し、ユーザーがブラウザの文字サイズ設定を変更した際に、ページ全体が破綻せずに拡大縮小されるよう設計する手法が定着しています。Googleの検索品質評価ガイドラインやWCAG（Web Content Accessibility Guidelines）でも、テキストサイズを固定単位だけに依存させない設計が推奨されています。