CSSの単位「em」と「rem」の違いをやさしく解説

2026年3月13日

CSSでフォントサイズや余白を指定するとき、px以外にもemやremという単位をよく見かけますよね。

「なんとなく使っているけど、正直違いがよくわからない…」

という方も多いのではないでしょうか。

ぶっちゃけわかってないっす…

この記事では、emとremの違いを、初心者の方でもスッキリ理解できるようにやさしく説明します。

まず「相対単位」という考え方を知っておこう

pxは絶対的な大きさを指定する単位ですが、emとremはどちらも相対単位です。相対単位とは、「何かを基準にして大きさを決める」という考え方で、画面サイズや親要素の設定に合わせて柔軟にサイズが変わるのが特徴です。

この「何を基準にするか」が、emとremで異なります。それが2つの単位の最大の違いです。

emは「親要素のフォントサイズ」が基準

emは、その要素の親要素に設定されているフォントサイズを1として計算します。

たとえば、こんなHTMLとCSSがあるとします。

html

HTML

<div class="parent">
  親テキスト
  <p class="child">子テキスト</p>
</div>

HTML

css

CSS

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 20px × 1.5 = 30px */
}

CSS

この場合、.childのフォントサイズは20px × 1.5 = 30pxになります。親の20pxが基準になっているわけですね。

emの注意点：入れ子にすると計算が複雑になる

emが少し厄介なのは、入れ子（ネスト）が深くなるほど計算が複雑になる点です。

html

HTML

<div class="level1">  <!-- font-size: 20px -->
  <div class="level2">  <!-- font-size: 1.5em → 30px -->
    <p class="level3">テキスト</p>  <!-- font-size: 1.5em → 45px！ -->
  </div>
</div>

HTML

css

CSS

.level1 { font-size: 20px; }
.level2 { font-size: 1.5em; }
.level3 { font-size: 1.5em; }

CSS

level3の実際のサイズは45pxになります。それぞれの階層で「親の値×1.5」が繰り返されるため、どんどん大きくなってしまいます。意図しないサイズになりやすいのがemの落とし穴です。

remは「ルート要素のフォントサイズ」が基準

remの「r」は**root（ルート）**の略です。remは親要素ではなく、ページ全体の根っこにある<html>要素のフォントサイズを常に基準にします。

ほとんどのブラウザでは、<html>のデフォルトフォントサイズは16pxです。

css

CSS

/* htmlのデフォルトは16px */

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

p {
  font-size: 1rem; /* 16px × 1 = 16px */
}

small {
  font-size: 0.75rem; /* 16px × 0.75 = 12px */
}

CSS

どれだけ入れ子が深くなっても、基準は常に<html>の16px。計算が一定で予測しやすいのがremの大きな強みです。

NG例とOK例で確認しよう

複数のコンポーネントにまたがってサイズを統一したいとき、emを使うと思わぬ結果になることがあります。

NGな使い方（emで統一しようとした場合）

css

CSS

.card { font-size: 1.2em; }
.card .title { font-size: 1.2em; } /* 実際は1.2×1.2で1.44em相当になる */
.card .description { font-size: 1em; } /* cardの1.2emが基準 */

CSS

入れ子になると意図した通りのサイズにならず、管理が難しくなります。

OKな使い方（remで統一した場合）

css

CSS

.card .title { font-size: 1.2rem; } /* 常に16px基準 → 19.2px */
.card .description { font-size: 1rem; } /* 常に16px基準 → 16px */

CSS

常にルートを基準にするため、どこに書いても同じ大きさになります。

サイトを通じたサイズ管理がシンプルになります。

結局、どちらをどんなときに使えばいい？

場面	おすすめの単位
サイト全体のフォントサイズ管理	`rem`
見出し・本文などの基本サイズ	`rem`
コンポーネント内で親に連動させたいとき	`em`
ボタンのpaddingをフォントサイズに合わせたいとき	`em`

基本的にはremを使っておけば安心です。 予測しやすく、ミスが起きにくいためです。

emが活きるのは、

「このコンポーネントのフォントサイズを変えたら、paddingも自動で変わってほしい」

というように、親のサイズに連動させたい場面です。

たとえばボタンのフォントサイズを大きくしたら余白も自動で広がる、

という動きを実現したいときにemは便利です。