remとemの違いとは？サイズ指定の基本を理解しよう

CSSで文字サイズや余白などを指定する際に使われる単位「rem」と「em」。

どちらも相対的なサイズ指定に使われる単位ですが、基準となる値が異なるため、正しく理解して使い分けることが大切です。

remとは？

rem は「root em」の略で、HTML要素（ルート要素）のフォントサイズを基準とした相対単位です。

たとえば、ルート要素（<html>）に以下のように指定している場合：

html {
  font-size: 16px;
}

このとき、1rem = 16px になります。

ちなみに、主要ブラウザではデフォルトが16pxになっています。

htmlにフォントサイズを指定しまうと端末側で文字サイズの変更ができなくなるので、特別な理由がなければ省略することが推奨されています。

remの例

body {
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  margin-bottom: 1.5rem; /* 24px */
}

常に html の font-size を基準に計算されるため、どこで使用してもサイズが一定になる（親要素の影響を受けない）のが特徴です。

emとは？

em は、その要素自身、または親要素のフォントサイズを基準にした相対単位です。

たとえば、親要素に font-size: 20px; と指定した上で、子要素に font-size: 1.2em; と指定すると、子要素のフォントサイズは 24px になります。

emの例

.container {
  font-size: 18px;
}

.container p {
  font-size: 1em; /* 18px */
}

.container small {
  font-size: 0.8em; /* 14.4px */
}

入れ子が深くなると、親要素のサイズに応じてどんどんサイズが変化していくため、思わぬレイアウト崩れが起きることもあります。

emはpaddingやmargin、widthで使うことが多い

em 単位は文字サイズに対して相対的な値を指定できるため、要素内の文字サイズに応じた余白設計に便利です。

ですので、文字サイズに使うよりも、余白やサイズ指定で使うことのほうが多いです。

基本的な使い方

たとえば、以下のように font-size に対して padding を em で指定すると、テキストサイズに比例して余白が調整されます。

.box {
  font-size: 16px;
  padding: 1em; /* 16px */
}

この場合、1em はその要素の font-size（=16px）を基準とするため、上下左右すべて 16px の余白が付きます。

実用例：ボタンにemを使う

.button {
  font-size: 14px;
  padding: 0.5em 1em; /* 上下7px、左右14px */
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 0.25em;
}

padding を em にすることで、フォントサイズを変更したときにも、ボタンの内側の余白が自動的に調整され、見た目のバランスが保たれます。

remとemの違いまとめ

remとemの違いは以下の通りです。

比較項目	rem	em
基準	`<html>` 要素のフォントサイズ	親または自身のフォントサイズ
安定性	安定している（どこでも同じ値）	親の影響を受けるため変動しやすい
可読性	高い	状況により混乱しやすい
よく使う場面	レイアウトやタイポグラフィ全体に使いたいとき	padding、margin、widthなどを文字サイズに応じて変化させたい時

文字サイズの指定はremが推奨されている

通常、文字サイズの指定はpxではなく、remを使うことが推奨されています。

rem が推奨されている理由としては、ユーザーが端末やブラウザの設定で文字サイズを調整できるようにするためです。

ユーザーが自由にフォントサイズを変えられる

多くのブラウザやOSには、視力の弱いユーザーのために文字サイズを拡大・縮小する機能があります。

このとき、rem で指定されたフォントサイズやレイアウトは、ルート要素（<html>）のサイズに追従するため、ユーザーが設定したサイズに応じて自動的に拡大・縮小されます。

body {
  font-size: 1rem; /* 常にhtmlのサイズを基準に計算される */
}

アクセシブルなWebサイトにするために

高齢者や視覚障害のあるユーザーにも優しいWebサイトを作るには、px のような固定単位ではなく、rem のようなユーザー設定を尊重できる単位を使うことが重要です。

このように、rem を採用することで、アクセシビリティ向上とレスポンシブな設計の両方を実現することができます。Web制作における標準的な考え方として、積極的に取り入れていきましょう。

まとめ

rem はルート（html）を基準にした安定的な単位。
em は親要素を基準にした柔軟な単位。
ユーザビリティの観点とレイアウト崩れが発生しづらい点から、文字サイズにはremを使うことが推奨されている