pxからremへの変換方法
CSSでピクセル値をrem単位に変換する方法を解説します。変換公式、ルートフォントサイズの役割、remがアクセシビリティとレスポンシブ性を向上させる理由を学びます。
Basic Conversion
詳細な説明
px-to-rem変換の理解
ピクセルをremに変換する公式は単純です：
rem = px / ルートフォントサイズ
デフォルトではほとんどのブラウザがルートフォントサイズを16pxに設定しているため、変換は次のようになります：
rem = px / 16
ステップごとの例
16pxベースで24pxをremに変換する場合：
- 24を16で割る
- 結果：1.5rem
なぜ16pxがデフォルトなのか
CSS仕様は特定のルートサイズを義務付けていませんが、すべての主要ブラウザ（Chrome、Firefox、Safari、Edge）は<html>要素のデフォルトとして16pxを採用しています。ユーザーはブラウザ設定でこれを変更してテキストをグローバルに拡大・縮小でき、これがremの主要なアクセシビリティ上の利点です。
クイックリファレンステーブル
| px | rem（ベース16） |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
ベースが16pxでない場合
一部のプロジェクトではhtml { font-size: 62.5%; }を設定し、1remを10pxにしています。その場合、公式はrem = px / 10となり、暗算が容易になります。当コンバーターではカスタムベースサイズを指定できます。
ユースケース
固定pxの値をremに移行し、デバイス間でのアクセシビリティとレスポンシブスケーリングを改善するフロントエンド開発者向けです。