remとemの違い｜入れ子で文字が大きくなる理由と使い分け

remとemは、どちらも文字の大きさを1として長さを決める単位です。 違いは、どの文字の大きさを1にするかです。

remはページ全体の基準になるhtml要素の文字サイズを1にします。 emは、その単位を書いた要素自身の文字サイズを1にします。

ふだんは同じ値に見えても、入れ子にしたとき・余白に使ったとき・ブラウザの文字サイズを変えたときに差が出ます。 この記事では、その3つの場面とメディアクエリでの違いをChromeで測った値で示し、使い分けの目安をまとめます。

remとemは「1」にする文字サイズが違う

まず、それぞれの1が何pxになるかを整理します。

単位	1の大きさ
rem	html要素の文字サイズ
em	その要素の文字サイズ
px	CSSの1px（文字サイズに左右されない）

html要素に何も書いていなければ、1remはブラウザの既定の文字サイズです。 Chromeの初期設定では16pxなので、1rem = 16px、1.5rem = 24pxになります。

emには例外が1つあります。 文字サイズ（font-size）そのものにemを使ったときは、親要素の文字サイズを1にします。 自分の文字サイズを決める指定なので、自分の文字サイズはまだ使えないためです。

文字サイズのemは、入れ子にすると掛け算になる

この例外のために、文字サイズにemを使うと、入れ子のたびに大きさが掛け算で増えていきます。 たとえば、注記を少し大きくする指定を書いたとします。

.note { font-size: 1.2em; }

この .note の中に、さらに .note を入れると、内側ほど大きくなります。 同じ指定をremで書いた場合と、Chromeで測った値を並べます（基準は16px）。

入れ子の段	1.2em	1.2rem
1段目	19.2px	19.2px
2段目	23.04px	19.2px
3段目	27.648px	19.2px

emは親の大きさに1.2を掛けるので、3段目は16 × 1.2 × 1.2 × 1.2で約1.73倍です。 remは毎回html要素の文字サイズに戻るので、何段重ねても19.2pxのままです。

箇条書きの中の箇条書きや、記事の中に入れた引用のように、同じ部品が重なる場所で起きやすい形です。 小さくする指定（0.8emなど）なら、逆に内側ほど小さくなります。

余白のemは、その要素自身の文字サイズが基準

文字サイズ以外にemを使うと、基準は親ではなくその要素自身の文字サイズになります。 親が16px、自分が20pxの要素で、余白（padding）を比べました。

指定	余白の大きさ
padding: 1em	20px
padding: 1rem	16px

1emは自分の文字サイズの20pxで、親の16pxではありません。 「emは親要素が基準」と覚えていると、ここで計算が合わなくなります。

この性質は、ボタンのように文字と余白を一緒に大きくしたい部品で役に立ちます。 余白をemで書いておけば、文字サイズを変えるだけで余白も同じ割合で広がります。

ブラウザの文字サイズ設定に追従するのはremとem

パソコン版のChromeでは、「設定」→「デザイン」→「フォントサイズ」で文字の大きさだけを変えられます。 この設定を変えても、pxで決めた文字は変わりません。 remとemで決めた文字は、基準をたどった先がpxで固定されていなければ大きくなります。

Chromeの既定の文字サイズを16px・20px・24pxにして、1remの大きさを測りました。 列は、html要素に書いた文字サイズの指定です。

既定	指定なし	16px	62.5%
16px	16px	16px	10px
20px	20px	16px	12.5px
24px	24px	16px	15px

html要素に16pxと書くと、設定をいくら大きくしても1remは16pxのままです。 Chromeのヘルプにも、テキストサイズだけを変えられないサイトでは、フォントサイズの設定が効かないと書かれています。

62.5%のように割合で書けば、設定に合わせて基準も大きくなります。 1rem = 10pxとして計算しやすくする書き方ですが、文字サイズの設定には追従します。

メディアクエリのemは、htmlの文字サイズを見ない

画面の幅で表示を切り替えるメディアクエリでも、emとremを使えます。 ただし、ここでの1emと1remは、html要素に書いた文字サイズでは決まりません。

CSSの仕様では、メディアクエリのように要素の外で使うemとremは、ブラウザの既定の文字サイズで決まります。 html要素を10pxにした状態で、幅が50em以上のときだけ効く指定を書いて確かめました。

• 既定が16pxのとき: 799pxでは効かず、800pxから効いた（50 × 16）
• 既定が20pxのとき: 999pxでは効かず、1,000pxから効いた（50 × 20）

html要素の10pxで計算すると、500pxで切り替わるように見えます。 実際は既定の16pxで計算した800pxです。 62.5%などで基準を変えたページでは、メディアクエリの値を別に計算してください。

使い分けの目安

ここまでの性質から、迷ったときの目安を挙げます。 決まりではないので、作っているページの方針があればそちらに合わせてください。

• 文字サイズ: remにすると入れ子でも膨らまない。html要素をpxで固定していなければ、文字サイズの設定にも追従する
• ボタンや見出しまわりの余白: emにすると、文字の大きさに合わせて余白も伸び縮みする
• 枠線の太さなど: 文字に合わせて太くしたくなければpx
• html要素の文字サイズ: pxで固定せず、%で書くと設定への追従が残る

emを文字サイズに使う場合は、入れ子になっても困らない場所かを確かめてから使います。

pxとの換算を確かめる

カンプのpxをremやemに直すときは、CSS単位変換で9種類の単位をまとめて確かめられます。 「詳細設定」で、ルートの文字サイズと、emの基準にする文字サイズを別々に変えられます。

「em・% の基準フォントサイズ」の欄には、文字サイズにemを使うときは親の文字サイズを入れます。 余白や幅にemを使うときは、その要素自身の文字サイズを入れてください。

ツールの操作はpxとremを相互変換する使い方にまとめています。

関連記事

• pxとremを相互変換する使い方（ツールの操作）
• CSSグラデーションの真ん中がくすむ原因（CSSの色の混ざり方）
• 見づらい配色を減らす確認項目と直し方（文字の読みやすさ）

参考・出典

• CSS Values and Units Module Level 4（Font-relative Lengths） — W3C （2026-10-15 閲覧）
• テキスト、画像、動画のサイズを変更する（ズーム） — Google Chrome ヘルプ （2026-10-15 閲覧）

本記事は上記の公的機関・公式情報源を参考にしています。最新の情報は各リンク先をご確認ください。