remとemは、CSSで頻繁に登場する相対単位ですが、その違いを正確に理解して使い分けることは、Webデザインやフロントエンド開発において非常に重要です。
本記事では、remとemの定義から具体的な使い分け、実践的な活用法、アクセシビリティやデザインシステムとの関係まで、あらゆる観点から詳細に解説します。
単なる「違い」だけでなく、現場で迷わないための判断基準や、より柔軟で拡張性の高いCSS設計のヒントが得られるでしょう。
cssのfont-sizeなどに使われるrem em 違い:基礎知識
CSSのfont-sizeを指定しる際、remとemではサイズの基準が違いますので、挙動の違いが出てきます。
それぞれの役割から見ていきましょう。
CSSにおける単位の種類とその役割
Webデザインにおいて、CSSで指定できる単位は大きく「絶対単位」と「相対単位」に分かれます。
絶対単位の代表格がpx（ピクセル）であり、これは画面上の物理的なドット数を直接指定するものです。
対して、emやremは相対単位に分類され、親要素やルート要素のフォントサイズを基準に計算されます。
相対単位を使うことで、デザインの柔軟性やレスポンシブ対応、アクセシビリティの向上が期待できます。
emとは？定義と特徴
emは「emphasis（強調）」の略であり、指定した要素の親要素のfont-sizeを基準にした相対値として機能します。
たとえば、
親要素のfont-sizeが16pxであれば、1emは16pxとなります。
もし親要素のfont-sizeが24pxであれば、1emは24pxに変化します。
この性質により、emは特定の範囲やコンポーネント単位での柔軟なサイズ指定に向いていますが、入れ子構造が深くなると計算が複雑になりやすいというデメリットもあります。
remとは？定義と特徴
remは「root em」の略であり、HTMLドキュメントのルート要素（通常はhtmlタグ）のfont-sizeを基準にした相対単位です。
ほとんどのブラウザでは、デフォルトのhtml要素のfont-sizeは16pxに設定されています。
そのため、1remは通常16pxとなります。
remの最大の特徴は、どの要素に対しても一貫してルート要素のfont-sizeを基準に計算される点であり、ネストの影響を受けません。
このため、大規模なデザインシステムや一貫性の高いレイアウト設計に適しています。
pxとの違いと相対単位の意義
pxは絶対単位であり、ユーザーがブラウザで設定したフォントサイズやズーム設定を無視して固定の大きさを指定します。
これに対し、emやremはユーザーの設定や親要素の影響を受けるため、アクセシビリティやレスポンシブデザインにおいて推奨される傾向が強まっています。
emとremの計算方法と具体例
emの計算ロジック
emは常に親要素のfont-sizeを基準に計算されます。
例えば、
親要素が 20pxで、子要素に 2emと指定した場合、その子要素のfont-sizeは40pxになります。
さらに、
その子要素の中に孫要素があり、孫要素にも 1.5emと指定した場合、孫要素のfont-sizeは親（子要素）の40pxを基準に1.5倍、すなわち60pxとなります。
このように、emは階層構造が深くなるほど計算が複雑になりやすいという特徴があります。
remの計算ロジック
remは常にルート要素（htmlタグ）のfont-sizeを基準に計算されます。
たとえば、
html要素のfont-sizeが16pxの場合、どんなに深い階層の子孫要素であっても、font-size: 2rem;と指定すれば32pxとなります。
ルートと小要素の中間要素のサイズ変更の影響を受けないので、ルートの変更のに相対的に変化します。
この一貫性がremの大きな利点です。
実際のコード例と表示結果
以下は、emとremの違いを示す具体的なHTMLとCSSの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>emとremの違いデモ</title>
<style>
html { font-size: 16px; }
.parent { font-size: 20px; }
.child-em { font-size: 2em; }
.child-rem { font-size: 2rem; }
</style>
</head>
<body>
<div class="parent">
<p class="child-em">これは2emです（=40px）</p>
<p class="child-rem">これは2remです（=32px）</p>
</div>
</body>
</html>この例では、.child-emは親要素の20pxを基準に2倍の40px、.child-remはルート要素の16pxを基準に2倍の32pxとなります。
See the Pen em vs rem by naoq (@naoq) on CodePen.
emは親要素の影響を受け、remはルート要素の影響のみを受けることが明確に分かります。
rem、emの使い分けとレスポンシブに対応した実践的な活用
emとremの使い分けとベストプラクティス
emが適しているケース
emは、特定のコンポーネントやセクション単位で、親要素のサイズに連動させたい場合に有効です。
たとえば、ボタンやカードなど、親要素のサイズ変更に応じて内部の要素サイズも自動で調整したい場合、emを使うことで一括してスケーリングが可能となります。
また、line-heightやletter-spacingなど、フォントサイズに依存するプロパティにもemがよく使われます。
remが適しているケース
remは、全体のレイアウトやタイポグラフィ、スペーシングなど、一貫性を重視したい場合に適しています。
たとえば、
デザインシステムやスタイルガイドを構築する際、remで統一することで、どの要素もルートのfont-sizeを基準にサイズを計算でき、デザインの一貫性や拡張性が高まります。
また、アクセシビリティの観点からも、remを使うことでユーザーがブラウザ設定でフォントサイズを変更した際に全体がスケーリングしやすくなります。
emとremの組み合わせ
実際の現場では、emとremを適切に使い分けることで、柔軟かつ一貫性のあるデザインが実現できます。
たとえば、全体のベースとなるfont-sizeやマージン、パディングはremで指定し、コンポーネント内部の細かい調整にはemを使うといった設計が一般的です。
remとemによるレスポンシブ対応：pxからremへの移行のメリット
従来はpxによる絶対指定が主流でしたが、アクセシビリティやレスポンシブ対応の観点からremへの移行が進んでいます。
px指定ではユーザーがブラウザでフォントサイズを変更しても反映されませんが、remを使えばユーザー設定に応じて全体がスケーリングされるため、より多様なユーザーに対応できます。
emとremの落とし穴と注意点
emのネストによる計算の複雑化
emは親要素のfont-sizeを基準にするため、入れ子構造が深くなると計算が複雑になりやすいというデメリットがあります。
たとえば、
複数階層にわたってem指定が重なると、どの要素がどのサイズを基準にしているのか把握しづらくなり、意図しないサイズになることがあります。
このため、大規模なプロジェクトやチーム開発では、remをメインに使い、emは必要最小限にとどめる設計が推奨されることが多いです。
remの一貫性と62.5%テクニック
remを使う際によく用いられるテクニックとして、html要素のfont-sizeを62.5%（=10px）に設定する方法があります。
デフォルトの16pxに対して62.5%を掛けることで、1rem=10pxとなり、pxからremへの変換が直感的に行えるようになります。
たとえば、32pxを指定したい場合は3.2rem、24pxなら2.4remといった具合です。
この方法は、デザインシステムやスタイルガイドの運用においても非常に便利ですが、ユーザーがブラウザのデフォルトフォントサイズを変更している場合には注意が必要です。
アクセシビリティとユーザー設定
remの最大のメリットは、ユーザーがブラウザの設定でフォントサイズを変更した際に、全体のスケーリングが容易になる点です。
px指定ではユーザー設定が無視されてしまいますが、remを使えばユーザーごとに最適な表示が実現できます。
このため、WCAG（Web Content Accessibility Guidelines）でも相対単位の使用が推奨されています。
emとremの実践的な活用法
タイポグラフィ設計におけるemとrem
タイポグラフィ設計では、ベースとなるfont-sizeをremで指定し、見出しや本文、キャプションなどの階層ごとにrem値を割り当てる方法が一般的です。
＊ベースとなるfont-sizeをpxにするとユーザーがブラウザ設定でフォントサイズを変更しても、拡大縮小が効きにくくなることがあります。
ベースとなるfont-sizeは、
html { font-size: 1rem; } のように、ユーザー設定を尊重する指定が望ましいです。
たとえば、
h1は3rem、h2は2rem、本文は1remといった具合です。
これにより、ルートのfont-sizeを変更するだけで全体のバランスを一括調整できます。
一方、line-heightやletter-spacingなど、フォントサイズに依存するプロパティにはemを使うことで、要素ごとのスケーリングが容易になります。
たとえば、
font-size: 2rem; line-height: 1.5em;と指定すれば、フォントサイズの変更に応じて行間も自動調整されます。
レイアウトやスペーシング設計におけるremの活用
レイアウトやスペーシング（マージン、パディングなど）にはremを使うことで、全体の一貫性や拡張性が高まります。
たとえば、
8pxグリッドシステムを採用する場合、8px=0.5rem、16px=1rem、24px=1.5remといった形でrem値を割り当てることで、デザインの階層感やリズムを保ちながらスケーラブルな設計が可能となります。
コンポーネント設計におけるemの活用
ボタンやカード、モーダルなどのコンポーネント内部で、親要素のサイズに応じて子要素のサイズも自動調整したい場合にはemが有効です。
たとえば、
ボタンのfont-sizeを親要素で一括指定し、内部のアイコンやテキストサイズをemで指定することで、ボタンサイズの変更に応じて内部要素も連動してスケーリングされます。
実際の現場での使い分け事例
現場では、ベースとなるfont-sizeや主要なスペーシング、レイアウトにはremを使い、コンポーネント内部の細かい調整やフォントサイズ依存のプロパティにはemを使う設計が一般的です。
また、スタイルガイドやデザインシステムでは、pxとremの併記や変換表を用意することで、デザイナーと開発者の間での認識のズレを防ぐ工夫も行われています。
remとemの今後の展望とデザインシステムへの影響
デザインシステムにおけるremの重要性
近年、デザインシステムの構築や運用が注目される中で、remの重要性がますます高まっています。
remを使うことで、全体のスケーラビリティや一貫性が担保され、ルートのfont-sizeを変更するだけで全体のサイズ感を一括調整できるため、大規模なプロジェクトや複数プロダクトを横断するデザインシステムにおいて不可欠な存在となっています。
アクセシビリティと国際化への対応
remの活用は、アクセシビリティや国際化（i18n）対応にも直結します。
ユーザーがブラウザやOSの設定でフォントサイズを変更した場合でも、remを使った設計であれば全体がスムーズにスケーリングされます。
これにより、高齢者や視覚障害者、多言語対応が求められるグローバルサービスにおいても、ユーザビリティを損なうことなく柔軟に対応できます。
デザインツールと開発環境の進化
FigmaやZeplinなどのデザインツールでは、remやemへの対応が進んでおり、デザイナーと開発者の間での単位変換やコミュニケーションがよりスムーズになっています。
今後もツール側の進化により、pxからremへの自動変換や、スタイルガイドへのrem併記が標準化されていくと考えられます。
今後のWeb標準と相対単位の普及
WCAG（Web Content Accessibility Guidelines）でも相対単位の使用が推奨されており、今後もremやemの普及が進むことは間違いありません。
また、CSSの新しい機能や変数（Custom Properties）との組み合わせにより、より柔軟で拡張性の高いデザインが可能となるでしょう。
まとめ：フォントサイズに使われるrem em 違い
remとemは、どちらもCSSにおける重要な相対単位ですが、その違いを正確に理解し、適切に使い分けることがWebデザインやフロントエンド開発において不可欠です。
emは親要素のfont-sizeを基準にした柔軟なスケーリングが可能ですが、ネストが深くなると計算が複雑になるというデメリットがあります。
一方、remはルート要素のfont-sizeを基準に一貫したスケーリングが可能であり、デザインシステムやアクセシビリティ対応、国際化対応において非常に有用です。
現場では、ベースとなるfont-sizeやレイアウト、スペーシングにはremを使い、コンポーネント内部の細かい調整やフォントサイズ依存のプロパティにはemを使う設計が一般的です。
また、pxからremへの移行や、デザインツールとの連携、スタイルガイドへのrem併記など、実践的な運用方法も進化しています。
今後もWeb標準やデザインツールの進化により、remやemの活用はますます広がっていくでしょう。
アクセシビリティや国際化、多様なユーザーに対応するためにも、相対単位の正しい理解と活用が求められます。
本記事を通じて、remとemの違いを深く理解し、現場で迷わないための判断基準や設計のヒントを得ていただければ幸いです。
