CSSでピクセル(px)をremに変換する方法（シンプルガイド）

完璧なピクセルで美しいウェブサイトを構築したのに、ユーザーがブラウザのデフォルトフォントサイズを上げた瞬間にレイアウトが完全に崩れてしまった経験はありませんか？私もそうです。それは通常、開発者がすべての要素にピクセル（px）をハードコーディングすることが、アクセシビリティにとって悪夢であることを身をもって学ぶ瞬間です。

そこで登場するのが rem 単位です。

これまでピクセルだけで考えてきた人にとって、rem への切り替えは、新しい外国語を急いで学んでいるような気分になるかもしれません。でも心配しないでください。一度コツを掴んでしまえば、開発者としての生活がずっと楽になります。

数学の学位がなくてもできる、px から rem への変換方法を詳しく解説します。

そもそもなぜ rem について話しているのか？

ピクセルを絶対的な測定値として考えてみてください。家を建てる際に、請負業者に「この窓を正確に40インチの幅にしてください」と言うようなものです。その窓は、家の他の部分がどうなろうと40インチのままです。これがピクセルです。

一方、rem は相対的な測定値です。固定されたインチを使う代わりに、請負業者に「この窓を標準的な土台のレンガの幅のちょうど3倍にしてください」と伝えます。後で大きなレンガを使うことに決めても、窓は自動的に比例して拡大されます。

CSSにおいて、rem は “root em” の略です。これは単に「ルートHTML要素のフォントサイズに対して相対的」であることを意味します。ユーザーは読みやすさのためにブラウザ設定でデフォルトのフォントサイズを変更できるため、rem を使うことで、ウェブサイト全体がユーザーの好みに合わせてシームレスに拡大縮小されます。レイアウトが崩れることもなく、テキストも読みやすいままです。まさにウィンウィンです。

標準的な計算方法：変換のやり方

覚えておくべき黄金律はこれです：デフォルトでは、ほぼすべての現代的なウェブブラウザのルートフォントサイズは 16px に設定されています。

つまり、CSSで明示的に上書きしない限り、1rem は 16px に等しくなります。

頭の中にあるピクセル値を rem 値に変換するには、次の基本的な数式を使います。

ターゲットのピクセル値 ÷ 基本のピクセル値 (16) = rem 値

例えば、Figmaのデザインを見ていて、見出しを 24px にする必要があるとします。その場合、24を16で割ります。

24 ÷ 16 = 1.5
したがって、CSSでは次のように記述します： font-size: 1.5rem;

もっと小さなキャプション（14px）が必要な場合は？

14 ÷ 16 = 0.875
したがって、次のように記述します： font-size: 0.875rem;

コーディングに集中している時に暗算をするのは面倒ですよね。もし計算を完全にスキップしたいなら、この (ピクセルからRemへのコンバーター) のようなツールをタブで開いておくことを強くお勧めします。ピクセルを入力するだけで、瞬時に計算してくれます。

「62.5%トリック」（計算をめちゃくちゃ簡単にする方法）

さて、すべてのCSSで計算機を使いたくない人のために、開発者は 62.5%トリック という賢いハックを編み出しました。

やり方はこうです。スタイルシートの最初で、ルートの html フォントサイズを 62.5% に設定します。

html {
  font-size: 62.5%;
}

なぜ 62.5% なのか？それは、デフォルトの 16px の 62.5% がちょうど 10px だからです。

これを行うことで、実質的に「標準的な土台のレンガ」を 10px に再定義したことになります。すると突然、計算が信じられないほど簡単になります。16で割る代わりに、10で割るだけでよくなります（つまり、小数点を左に1つ動かすだけです）。

24px にしたい？ 2.4rem と書くだけです。
14px にしたい？ 1.4rem と書くだけです。
36px にしたい？ 3.6rem と書くだけです。

魔法のように感じます。ただ、ルートフォントサイズがいじられていない既存のプロジェクトに参加する場合は、引き続き標準の「16で割る」計算が必要になることに注意してください。

究極の px から rem へのチートシート

手動で16で割る場合でも、サブモニターに表示しておくクイックリファレンスガイドが必要な場合でも、最も一般的なフォントサイズのチートシートを以下に示します（標準のデフォルトブラウザサイズ 16px を想定）：

希望のサイズ (px)	記述する値 (rem)	使用した計算式
10px	`0.625rem`	10 ÷ 16
12px	`0.75rem`	12 ÷ 16
14px	`0.875rem`	14 ÷ 16
16px	`1rem`	16 ÷ 16 (基本サイズ)
18px	`1.125rem`	18 ÷ 16
20px	`1.25rem`	20 ÷ 16
24px	`1.5rem`	24 ÷ 16
32px	`2rem`	32 ÷ 16
36px	`2.25rem`	36 ÷ 16
48px	`3rem`	48 ÷ 16
64px	`4rem`	64 ÷ 16

最後のアドバイス

文字通りすべてのものに rem を使う必要はありません。フォントサイズ、マージン、パディング、レイアウトの幅には非常に適しています。しかし、1pxの細いボーダー（border: 1px solid black）のような小さな装飾的なものについては、標準のピクセルのままで全く問題ありませんし、むしろその方が好ましい場合が多いです！

さあ、責任を持ってコーディングしましょう。ユーザー（とその視力）があなたに感謝することでしょう。