CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － remとemの使い分け

Web APP CSS
スポンサーリンク

rem と em は「どこを基準にサイズが決まるか」が違うだけ

でも、この違いを理解すると タイポグラフィ設計が一気に安定 します。

rem → ルート（html）のフォントサイズを基準にする
em → その要素自身 or 親要素のフォントサイズを基準にする

この“基準の違い”が、使い分けのすべてです。

ここからは、初心者でも迷わないように
CSS と Tailwind CSS の両方で、例題を交えて丁寧に解説します。

rem：常に「html の font-size」を基準にする

rem の特徴をかみ砕くと

  • どこで使っても 同じ基準
  • 親の影響を受けない
  • レスポンシブ設計と相性が良い
  • 文字サイズ・余白・レイアウトの“統一感”が出る

つまり、「全体のスケールを揃えたいとき」 に最適です。

CSS 版：rem の基本例

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

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

p {
  font-size: 1rem; /* 16px */
  margin-bottom: 1.5rem; /* 24px */
}
CSS

どこに書いても 1rem は 16px。
親要素の font-size が変わっても影響されません。

Tailwind 版（Tailwind は rem ベース）

Tailwind のサイズはすべて rem で設計されています。

<h1 class="text-4xl">見出し</h1>
<p class="text-base mb-6">本文テキスト</p>
HTML
  • text-base → 1rem
  • text-4xl → 2.25rem
  • mb-6 → 1.5rem

Tailwind を使う＝rem を自然に使っている、ということです。

em：その要素 or 親の font-size を基準にする

em の特徴をかみ砕くと

  • 親の font-size によって 相対的に変わる
  • ネストするとどんどん倍率がかかる
  • コンポーネント単位のスケール調整に便利
  • ただし、意図せずサイズが膨らむ“em 地獄”に注意

つまり、「コンポーネント内で相対的に調整したいとき」 に向いています。

CSS 版：em の基本例

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

.card h2 {
  font-size: 1.5em; /* 24px（1.5 × 16px） */
}

.card small {
  font-size: 0.875em; /* 14px（0.875 × 16px） */
}
CSS

ここでのポイントは
em は「その要素の親の font-size」を基準にする ということ。

em が“暴走”する例（初心者がハマりやすい）

.parent {
  font-size: 1.2em; /* 1.2 × 親の親 */
}

.child {
  font-size: 1.2em; /* 1.2 × 1.2 × 親の親 = 1.44倍 */
}
CSS

ネストが深いと、意図せずサイズがどんどん大きくなります。
これが「em 地獄」と呼ばれる現象です。

Tailwind で em を使う場合

Tailwind は基本 rem ですが、任意値で em を使えます。

<p class="text-[1.2em]">
  親のサイズに比例して大きくなるテキスト
</p>
HTML

ただし、Tailwind では em を使う場面は少なく、
ほとんどの場合 rem（デフォルトのユーティリティ）で十分です。

rem と em の使い分け（ここが一番大事）

rem を使うべき場面

  • ページ全体の文字サイズ
  • 余白（margin / padding）
  • レイアウト（width / height）
  • Tailwind のユーティリティを使うとき
  • レスポンシブでスケールさせたいとき

理由：基準がブレないので、デザインが安定する

em を使うべき場面

  • コンポーネント内で相対的にサイズを変えたい
  • ボタン内のアイコンサイズを文字に合わせたい
  • line-height をフォントサイズに比例させたい
  • メディアクエリをフォントサイズ基準にしたい

理由：親のサイズに応じて自然にスケールする

例1：ボタン内のアイコンは em が最適

CSS 版

.button {
  font-size: 1rem;
  padding: 0.75em 1.5em;
}

.button svg {
  width: 1em;
  height: 1em;
}
CSS

ボタンの font-size を変えると、
アイコンも自動でスケールします。

Tailwind 版

<button class="text-base px-[1.5em] py-[0.75em] flex items-center gap-2">
  <svg class="w-[1em] h-[1em]" ...></svg>
  ボタン
</button>
HTML

アイコンが文字サイズに比例して大きくなるので、
UI の一貫性が保たれます。

例2：カードコンポーネントは rem で安定させる

CSS 版

.card {
  padding: 1.5rem;
  border-radius: 0.75rem;
}

.card h3 {
  font-size: 1.25rem;
}

.card p {
  font-size: 1rem;
}
CSS

コンポーネントの外側の影響を受けず、
どこに置いても同じ見た目になります。

Tailwind 版

<div class="p-6 rounded-xl">
  <h3 class="text-xl font-semibold mb-2">タイトル</h3>
  <p class="text-base text-gray-600">説明テキスト</p>
</div>
HTML

Tailwind のユーティリティはすべて rem なので、
自然と「安定したコンポーネント」になります。

例3：メディアクエリは em が便利（上級者向け）

ブラウザはメディアクエリの em を
「ユーザーのフォント設定」に応じてスケールします。

CSS 版

@media (min-width: 40em) {
  .container {
    max-width: 800px;
  }
}
CSS

ユーザーがブラウザの文字サイズを大きくしている場合、
メディアクエリもそれに合わせて発動タイミングが変わります。

アクセシビリティに強い設計です。

まとめ

rem と em の違いは「基準がどこか」だけです。

rem → html の font-size を基準
em → 親 or 自分の font-size を基準

使い分けの結論はこれ。

  • rem：全体のスケールを安定させたいとき
  • em：コンポーネント内で相対的にスケールさせたいとき

Tailwind は rem ベースなので、
基本は rem（ユーティリティ）を使い、
必要な場面だけ em を任意値で使うのが最適です。

スポンサーリンク
タイトルとURLをコピーしました