px ↔ rem 換算計算とレスポンシブ CSS での使い分け（基準16px）

1. px ↔ rem オンライン計算ツール

ベースフォントサイズ（初期値 16px）を指定して、px と rem を相互変換できます。

---

2. 計算公式と速算表 (ルート 16px 基準)

計算公式

• px → rem: rem = px ÷ rootFontSize (例: 24 ÷ 16 = 1.5rem)
• rem → px: px = rem × rootFontSize (例: 1.25 × 16 = 20px)

主要ピクセルサイズの rem 換算表（基準 16px）

px	rem	主な使用目的
12 px	0.75 rem	キャプション・注釈
14 px	0.875 rem	補足テキスト・ボタン（小）
16 px	1 rem	標準本文サイズ (Body)
18 px	1.125 rem	リード文・サブタイトル
20 px	1.25 rem	H4 見出し・カードタイトル
24 px	1.5 rem	H3 見出し
32 px	2 rem	H2 見出し
48 px	3 rem	H1 ヒーロー見出し

---

3. なぜ px ではなく rem を使うべきなのか？

① ブラウザのフォントサイズ変更（アクセシビリティ）への追従

視覚障害や老眼のユーザーがブラウザ設定で「文字サイズ：大」に変更した場合、px で固定されたフォントは拡大されません。rem を使用することで、ユーザーのブラウザ設定に比例してテキストが拡大縮小されます。

② レスポンシブ設計での全サイズ一括調整

メディアクエリでルート（html）の font-size を変更するだけで、サイト全体のレイアウトやフォントを比例一括変更できます。

---

4. 注意点（ハマりどころ）

1. em と rem の混同
   • rem は「Root（html）のフォントサイズ」が基準ですが、em は「その親要素のフォントサイズ」が基準です。em をネスト要素（<ul><li><ul>...）で使うとサイズが累乗で肥大化する罠があります。
2. 極小サイズ (10px 未満) でのブラウザ最小サイズ制限
   • Chrome 等のブラウザは 12px 未満の描画を強制クランプする設定があるため、0.5rem (8px) 等を指定しても意図通り小さく表示されない場合があります。