PXとREMの変換について
Webデザインにおいて、絶対単位であるpx（ピクセル）と、相対単位であるrem（root em）の使い分けは重要です。多くのブラウザのデフォルトフォントサイズは16pxですが、アクセシビリティやレスポンシブ対応の観点から、開発現場ではremの使用が推奨されています。
先に考え方を読みたい方へ: 文字サイズ・余白・レスポンシブ設計で px と rem をどう分けるかは px / rem の使い方ガイド に具体例つきでまとめています。
計算式
rem = 変換したいpx値 / ルートのpxサイズ (通常16)
例えば、基準が16pxの場合、24pxの見出しは 24 / 16 = 1.5rem となります。
なぜ現代のWeb制作では「rem」が推奨されるのか？
- 1. アクセシビリティ（ユーザー設定の尊重）
-
ユーザーがブラウザ設定で「文字サイズを大きく」している場合、
pxで固定された文字は大きくなりませんが、remで指定された文字は設定に合わせて適切に拡大されます。誰もが読みやすいWebサイトを作るための基本マナーです。 - 2. グローバルなサイズ変更が容易
- ルート要素（htmlタグ）のフォントサイズを変更するだけで、サイト全体の文字サイズや余白の比率を保ったままスケールさせることができます。レスポンシブデザインでの微調整に非常に強力です。
「62.5%」テクニックとは？
計算を楽にするために、CSSで html { font-size: 62.5%; } と設定する手法があります。
デフォルトの16pxの62.5%は10pxになるため、1.6rem = 16px、2.4rem = 24px のように、「位をずらすだけ」で直感的に書けるようになります。
ただし、この手法を使う場合でも、計算機で正確な値を確認することでミスを防げます。
変換前に決めておくと楽なこと
- 本文・見出し・補足文の3段階だけでもサイズ基準を決める
- 余白も文字サイズに追従させたいなら rem 側に寄せる
- 1px / 2px の罫線や細かなアイコン調整は px のまま残す