ブラウザがrem単位を計算する方法

少し現実的な話をしましょう。かつてCSSでのサイズ指定は、本当に頭の痛い問題でした。ノートPCで美しいウェブサイトを作っても、誰かがスマートフォンで表示したり、画面をズームした瞬間に、レイアウト全体が崩れてしまっていたのです。

そこで登場したのが、remという単位です。ウェブデザインを少しでもかじったことがあるなら、きっと至る所で目にしたことがあるでしょう。しかし、一体remとは何なのでしょうか？そしてさらに重要なのは、ブラウザがどのようにしてその画面上での実際のサイズを計算しているのか、という点です。

心配いりません。難しい微積分などは一切出てきません。コーヒーを片手に、わかりやすい具体例を交えながら、ブラウザがどのようにrem単位を計算しているのかを紐解いていきましょう。

そもそもREMとは何の略？

remは、「root em（ルート・エム）」の略です。

タイポグラフィの測定基準の歴史についてさらに深く知りたい方は、Wikipediaにem単位の解説や、昔ながらの印刷機における物理的なルーツについての非常に興味深いまとめがあります。

しかし、現代のウェブデザインにおいては、「ルート（root、根）」の部分さえ理解しておけば十分です。

木をイメージしてください。根（ルート）は、木全体に栄養を送り出す土台です。HTMLドキュメントにおいて、ルートにあたるのは<html>タグです。つまり、rem単位は、単に<html>タグ（ルート）のフォントサイズを参照し、それを基準値として使用しているだけなのです。

「秘伝のレシピ」に例えてみよう

remの仕組みは、キッチンで「元となるレシピ」の分量を調整するようなものだと考えてみてください。

例えば、おばあちゃんから教わった秘伝のレシピで、ちょうど16個のチョコチップクッキーが作れるとします。

作る量を2倍にしたいときは、レシピの分量を2倍にします。すると32個のクッキーができます。
半分の量だけでいいときは、分量を0.5倍にします。すると8個のクッキーができます。

rem単位も、まったく同じ仕組みで動いています。ブラウザのデフォルトのルートフォントサイズは、通常16px（これが秘伝のレシピにあたります）です。

そのため、CSSに2remと記述すると、ブラウザは簡単な計算を行います。
16px（基準値） × 2（remの値） = 32px。

実にシンプルですね！

簡単な具体例を見てみよう

あなたのウェブサイトが、ルートに標準的なブラウザデフォルト値である16pxを使用していると仮定しましょう。ブラウザは、CSSで指定されたremを以下のようにピクセルに変換します：

段落テキスト（1rem）： 16px × 1 = 16px
大きな見出し（2.5rem）： 16px × 2.5 = 40px
フッターの小さなテキスト（0.875rem）： 16px × 0.875 = 14px

では、ルートのサイズを変更するとどうなるでしょうか？

16pxでは小さすぎると判断し、CSSに以下のように記述したとします：

html {
  font-size: 20px;
}

すると瞬時に、ブラウザはウェブサイト全体の計算を更新します。「秘伝のレシピ」が差し替えられたのです。これにより、同じremの値でも、全く異なるサイズとして計算されるようになります：

1rem は、20px に（20 × 1）
2.5rem は、50px に（20 × 2.5）
0.875rem は、17.5px に（20 × 0.875）

たった1行のコードを変更するだけで、ウェブサイト全体が完璧に比例して拡大・縮小されます。まるで魔法のようですね。

REM vs EM：マトリョーシカ人形問題

「なぜ単にemを使わないのか？」と疑問に思うかもしれません。

remがルート要素を参照するのに対し、通常のem単位は、その要素の親要素のフォントサイズを参照します。一見すると問題なさそうですが、要素を何重にも入れ子（ネスト）にし始めると厄介なことになります。例えば、<div>の中の<div>の中にリストを配置するような場合です。

em単位を使用することは、まるでマトリョーシカ人形（ロシアの入れ子人形）で遊ぶようなものです。親要素が1.2emで、子要素が1.2em、そして孫要素が1.2emだった場合、ブラウザはそれらをすべて掛け合わせます（1.2 × 1.2 × 1.2）。すると、気づけばテキストが巨大化しており、その理由が分からなくなってしまうのです。

一方、remは常に単一のルート要素のみを参照するため、このような「雪だるま式」の乗算効果が起きることはありません。挙動を予測しやすく安全で、イライラして髪をかきむしる心配もなくなります。

ブラウザ（そしてユーザー）がREMを愛する理由

「もし1remがただの16pxなら、最初から16pxと書けば計算の手間が省けるのではないか？」と思われるかもしれません。

その答えは、アクセシビリティにあります。

すべての人が完璧な視力を持っているわけではありません。快適に文字を読むために、ブラウザの設定画面でデフォルトのフォントサイズを16pxから20px、さらには24pxに変更している人はたくさんいます。

すべてpxだけでサイトを作ってしまうと、テキストのサイズが頑なに固定されてしまいます。ユーザーの設定は無視され、コンテンツを読むのが困難になってしまいます。
一方でサイトをremを使って構築していれば、ブラウザが「おっと、ユーザーがルートのサイズを24pxに変更したぞ！」と認識します。そして、新しい24pxの基準値に基づいてremの値を再計算するため、サイト全体がユーザーの設定に合わせて美しく拡大されます。

便利なREM 早見表（チートシート）

CSSを書くたびに毎回計算する手間を省けるよう、標準の16pxを基準にした便利な早見表を用意しました。ぜひブックマークしてご活用ください！

ブラウザの計算	記述する値（`rem`）	求めたいサイズ（ピクセル）
`16 × 0.75`	0.75rem	12px
16 × 0.875	0.875rem	14px
16 × 1	`1rem`（基準）	16px
16 × 1.125	1.125rem	18px
16 × 1.25	1.25rem	20px
16 × 1.5	1.5rem	24px
16 × 2	2rem	32px
16 × 3	3rem	48px
16 × 4	4rem	64px

（プロのヒント：自分で計算する場合は、目標とするピクセルサイズを16で割るだけです。例：24px ÷ 16 = 1.5rem）

計算を完全に省いて時間を節約したい場合は、当サイトの無料のrem・ピクセル変換ツールを使って、いつでも瞬時に正確なサイズを算出できます！

まとめ

いかがでしたでしょうか？ブラウザは、単にremの値にルートのフォントサイズを掛け合わせることで、rem単位を計算しています。これは、コードをクリーンに保ち、サイズの不具合に悩まされるのを防ぎ、すべての人にとってコンテンツを格段に読みやすくするための「スケール可能なレシピ」なのです。

あなたのサイトで、pxからremへの移行に苦戦している特定の要素はありますか？ぜひ教えてください。一緒に計算して解決しましょう！