CSSのemとremの違いとは？使い分けと計算方法を初心者向けに徹底解説

CSS の em と rem とは？基本を理解しよう

Web サイトを制作していると、CSS で文字サイズや余白を指定する際に「px」「em」「rem」という単位を目にすることがあります。

特にemとremは、どちらも相対的なサイズ指定ができる便利な単位ですが、「何が違うのか？」「どう使い分ければいいのか？」と迷う方も多いのではないでしょうか。

この記事では、em と rem の違いを基礎から徹底的に解説します。実際のコード例を交えながら、実務での使い分けのコツまでお伝えしますので、ぜひ最後までご覧ください。

相対単位とは何か？

まず前提として、CSS には「絶対単位」と「相対単位」があります。

絶対単位（px）

固定のサイズを指定する
例: font-size: 16px;
画面サイズが変わっても常に同じ大きさ

相対単位（em / rem / % など）

基準となる値に対して相対的にサイズを指定する
例: font-size: 1.5em;
基準が変われば、それに合わせてサイズも変化

em と rem は、どちらもこの相対単位に分類されます。

em と rem が注目される理由

近年、レスポンシブデザインやアクセシビリティの重要性が高まり、相対単位の需要が増えています。

レスポンシブ対応: 画面サイズに応じて柔軟に調整できる
アクセシビリティ: ユーザーのブラウザ設定（文字サイズ変更）に対応できる
保守性向上: 基準を変えるだけで全体のサイズを一括調整できる

特に 2026 年現在、実務で最も使われているのは remです。その理由を、em との違いを通して理解していきましょう。

em と rem の決定的な違い

em と rem の最大の違いは、**「何を基準にするか」**です。

em の基準: 親要素のフォントサイズ

emは、親要素のフォントサイズを基準とする相対単位です。

CSS

.parent {
  font-size: 20px;
}
 
.child {
  font-size: 1.5em; /* 親要素の20px × 1.5 = 30px */
}

この場合、.childの実際のサイズは30pxになります。

em の特徴

親要素が変われば、子要素のサイズも変わる
階層構造を意識したデザインに有効
ネストが深くなると計算が複雑になる

rem の基準: ルート要素（html）のフォントサイズ

rem（root em）は、ルート要素（html 要素）のフォントサイズを基準とする相対単位です。

CSS

html {
  font-size: 16px; /* ブラウザのデフォルト */
}
 
.element {
  font-size: 1.5rem; /* htmlの16px × 1.5 = 24px */
}

この場合、.elementの実際のサイズは24pxになります。

rem の特徴

常にルート要素が基準（親要素の影響を受けない）
ページ全体で一貫したサイズ管理ができる
計算がシンプルでわかりやすい

比較表: em と rem の違い

項目	em	rem
基準	親要素のフォントサイズ	ルート要素（html）のフォントサイズ
デフォルト値	親要素に依存	16px（ブラウザデフォルト）
親要素の影響	受ける	受けない
計算のしやすさ	ネストすると複雑	シンプル
使いどころ	コンポーネント内の相対的なサイズ調整	ページ全体の統一的なサイズ管理

em の具体的な使い方と計算方法

em の計算ルール

em の計算式は以下の通りです。

PLAINTEXT

実際のサイズ = 親要素のfont-size × emの値

実例 1: シンプルなケース

CSS

.parent {
  font-size: 20px;
}
 
.child {
  font-size: 2em; /* 20px × 2 = 40px */
}

.childのフォントサイズは40pxになります。

実例 2: ネストした場合の注意点

em の厄介なところは、ネストすると親の影響が累積する点です。

CSS

.grandparent {
  font-size: 16px;
}
 
.parent {
  font-size: 1.5em; /* 16px × 1.5 = 24px */
}
 
.child {
  font-size: 1.5em; /* 24px × 1.5 = 36px */
}

.childは、.parentの24pxを基準に計算されるため、36pxになります。

このように、階層が深くなるほど計算が複雑になるのが em の特徴です。

em が適している場面

em は以下のような場面で有効です。

1. コンポーネント内の相対的なサイズ調整

CSS

.button {
  font-size: 16px;
  padding: 0.5em 1em; /* フォントサイズに応じて余白も変わる */
  border-radius: 0.25em;
}

ボタンのフォントサイズを変更すると、padding や border-radius も自動的に調整されます。

2. 親要素のサイズに応じて変化させたい場合

CSS

.card {
  font-size: 18px;
}
 
.card-title {
  font-size: 1.5em; /* カードのサイズに合わせて変化 */
}
 
.card-text {
  font-size: 0.9em;
}

rem の具体的な使い方と計算方法

rem の計算ルール

rem の計算式は以下の通りです。

PLAINTEXT

実際のサイズ = htmlのfont-size × remの値

ブラウザのデフォルト値

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

CSS

/* ブラウザのデフォルト設定 */
html {
  font-size: 16px;
}
 
.element {
  font-size: 1rem; /* 16px × 1 = 16px */
  font-size: 2rem; /* 16px × 2 = 32px */
  font-size: 0.875rem; /* 16px × 0.875 = 14px */
}

rem の便利な使い方: 基準値を変更

html のフォントサイズを変更することで、ページ全体のサイズを一括調整できます。

CSS

/* デスクトップ */
html {
  font-size: 16px;
}
 
/* タブレット */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}
 
/* スマートフォン */
@media (max-width: 480px) {
  html {
    font-size: 12px;
  }
}
 
/* すべての要素がこの基準値に応じて変化 */
.heading {
  font-size: 2rem; /* デスクトップ: 32px / タブレット: 28px / スマホ: 24px */
}

このテクニックは、レスポンシブデザインで非常に強力です。

rem が適している場面

rem は以下のような場面で推奨されます。

1. ページ全体の統一的なサイズ管理

CSS

html {
  font-size: 16px;
}
 
h1 {
  font-size: 2.5rem; /* 40px */
}
 
h2 {
  font-size: 2rem; /* 32px */
}
 
h3 {
  font-size: 1.5rem; /* 24px */
}
 
p {
  font-size: 1rem; /* 16px */
  margin-bottom: 1rem; /* 16px */
}

2. レスポンシブデザイン

前述の通り、メディアクエリで html の font-size を変更するだけで、ページ全体のサイズを調整できます。

3. アクセシビリティ対応

ユーザーがブラウザの文字サイズ設定を変更した場合、rem を使っていれば自動的に反映されます。px では反映されません。

px との比較: いつ px を使うべきか？

em や rem が優れているからといって、px が不要というわけではありません。

px が適している場面

1. ピクセル単位の精密な制御が必要な場合

CSS

.border {
  border: 1px solid #ccc; /* 境界線は1pxが明確 */
}
 
.icon {
  width: 24px;
  height: 24px; /* アイコンサイズは固定が一般的 */
}

2. 小さな値（1px〜3px 程度）

CSS

.divider {
  height: 1px;
}

1px を rem で表現すると0.0625remとなり、可読性が下がります。

実務での使い分けの目安

項目	推奨単位	理由
フォントサイズ	rem	レスポンシブ・アクセシビリティ対応
余白（margin / padding）	rem または em	柔軟な調整が可能
ボタンの余白	em	フォントサイズに連動
境界線（border）	px	1px の精密さが必要
アイコンサイズ	px または rem	プロジェクトの方針による
レイアウト幅	% / vw / rem	レスポンシブ対応

em と rem の使い分けのベストプラクティス

実務では、em と rem をどう使い分ければいいのでしょうか？

基本方針: レイアウトは rem、細部は em

多くのプロジェクトで採用されている方針です。

CSS

/* 全体の基準設定 */
html {
  font-size: 16px;
}
 
/* ページ全体のレイアウト: rem */
body {
  font-size: 1rem;
  line-height: 1.6;
}
 
h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
 
/* コンポーネント内部: em */
.button {
  font-size: 1rem;
  padding: 0.5em 1em; /* フォントサイズに連動 */
  border-radius: 0.25em;
}
 
.card {
  font-size: 1rem;
  padding: 1.5rem; /* カード全体はrem */
}
 
.card-title {
  font-size: 1.25em; /* カード内の相対的なサイズ調整はem */
  margin-bottom: 0.5em;
}