CSSのremとemの違いとは？px・%との使い分けをわかりやすく解説

Webサイトのデザインを調整するとき、CSSのフォントサイズや余白の指定に悩んだことはありませんか。特にremとemは似たような単位に見えて、実際の動作がまったく異なります。この違いを理解していないと、レスポンシブデザインで思わぬ表示崩れが発生したり、保守性の低いコードになってしまったりする原因になります。本記事では、CSSのremとemの違いを基礎から丁寧に解説し、pxや%との使い分け方についてもわかりやすくお伝えします。実務で役立つ具体的なコード例や、プロのWeb制作者が実践している使い分けのコツまで網羅していますので、CSS初心者から中級者の方まで参考にしていただける内容です。

CSSのremとemとは

CSSでサイズを指定する際、remとemはどちらも相対単位と呼ばれるものです。絶対単位のpxとは異なり、基準となる要素のフォントサイズに応じて実際のサイズが変化します。この特性を活かすことで、柔軟でメンテナンス性の高いスタイル設計が可能になります。

まずは、それぞれの単位がどのような仕組みで動作するのかを詳しく見ていきましょう。基本を押さえることで、適切な使い分けができるようになります。

remの基本的な仕組み

remは「root em」の略で、HTML文書のルート要素であるhtml要素のフォントサイズを基準にします。多くのブラウザでは、html要素のデフォルトフォントサイズが16pxに設定されています。そのため、1remは通常16pxと同じ大きさになります。

remの最大の特徴は、どの階層の要素で使用しても、常にルート要素のフォントサイズだけを参照する点です。親要素のフォントサイズが変わっても影響を受けないため、予測しやすいサイズ計算が可能になります。

emの基本的な仕組み

emは親要素のフォントサイズを基準にする相対単位です。親要素のフォントサイズが20pxであれば、1emは20pxになります。この特性により、親子関係によってサイズが連鎖的に変化します。

emを入れ子構造で使用すると、サイズが掛け算で計算されるため注意が必要です。たとえば、親要素が1.5em、子要素も1.5emと指定した場合、子要素の実際のサイズは1.5×1.5=2.25倍になります。

remとemの計算例

具体的な数値で両者の違いを確認しましょう。以下の表は、html要素のフォントサイズが16pxの場合の計算例です。

指定値	remの場合	emの場合（親要素20px）
1	16px	20px
1.5	24px	30px
2	32px	40px

このように、同じ数値を指定しても基準となる要素によって実際のサイズが異なります。remは常にルート要素を参照するため一貫性があり、emは文脈に応じて柔軟にサイズが変わります。

あわせて読みたい

【2026年最新】HTML・CSSの独学に最適な本15選｜初心者から実務レベルまで徹底解説 この記事でわかること 初心者から上級者まで、レベル別に最適なHTML・CSS学習書籍15選 初心者には「いちばんよくわかるHTML5&CSS3デザインきちんと入門」などの基礎固め...

CSSのremとemの違いを比較

remとemの基本を理解したところで、より詳細な違いを比較していきます。実際のコーディングでは、それぞれの特性を把握したうえで適切に選択することが重要です。ここでは、参照元・継承・実用面という3つの観点から違いを整理します。

参照元の違い

remとemの最も根本的な違いは、サイズの基準となる参照元です。remはhtml要素のみを参照し、emは直接の親要素を参照します。この違いが、すべての挙動の差につながっています。

remを使えば、ページ全体で一貫したサイズ体系を構築できます。一方、emは要素間の相対的な関係性を表現するのに適しています。

継承の影響

emは親要素のフォントサイズを継承するため、ネストが深くなるほど計算が複雑になります。3階層、4階層と入れ子が増えると、意図しないサイズになることがあります。

remは継承の影響を受けないため、どれだけネストしても予測どおりのサイズを維持できます。この特性から、近年のCSSフレームワークではremが主流になっています。

以下の表で、継承による影響の違いをまとめます。

特性	rem	em
参照元	html要素	親要素
継承の影響	受けない	受ける
ネスト時の計算	単純	複雑になりやすい
予測可能性	高い	状況による

プロジェクトの規模が大きくなるほど、remの予測可能性が価値を発揮します。

実用面での違い

実務では、用途に応じてremとemを使い分けることが一般的です。サイト全体のフォントサイズや余白の基準にはremを、ボタンやカードなど特定のコンポーネント内ではemを使うといった方法が考えられます。

emは親要素との関係性を保てるため、コンポーネントのフォントサイズを変更すると、内部の余白も自動で調整される利点があります。この特性を活かすと、再利用性の高いパーツを作成できます。

pxや%との違いと使い分け

CSSにはremとem以外にも、pxや%といったサイズ指定の方法があります。それぞれの特性を理解し、適切に使い分けることで、より柔軟で保守性の高いスタイルシートを作成できます。ここでは、各単位の特徴と具体的な使い分け方を解説します。

pxの特徴と使いどころ

pxは絶対単位であり、指定した値がそのまま画面上のピクセル数として表示されます。基準となる要素が存在しないため、計算の必要がなく直感的に使える点がメリットです。

ただし、ユーザーがブラウザのフォントサイズ設定を変更しても、pxで指定した部分は変化しません。アクセシビリティの観点から、本文のフォントサイズにpxを使うことは推奨されなくなっています。

pxが適しているのは、ボーダーの太さやシャドウのぼかし具合など、ユーザー設定に依存させたくない細かな装飾部分です。

%の特徴と使いどころ

%は親要素のサイズを基準にする相対単位です。フォントサイズに使った場合はemと同様の計算になりますが、widthやheightに使った場合は親要素の幅や高さを基準にします。

%はレイアウトの幅指定に特に有効で、レスポンシブデザインの基本となる単位です。コンテナの幅を100%にして、内部の要素を50%ずつ配置するといった使い方が一般的です。

4つの単位の比較表

ここまで紹介した4つの単位を、特徴ごとに整理した比較表をご覧ください。

単位	種類	基準	主な用途
rem	相対単位	html要素	フォントサイズ・余白
em	相対単位	親要素	コンポーネント内の調整
px	絶対単位	なし	ボーダー・シャドウ
%	相対単位	親要素	レイアウト幅

この表を参考に、目的に応じた単位を選択してください。

用途別の推奨単位

実際のコーディングでどの単位を選べばよいか、用途別にまとめます。以下のチェックリストを参考にしてください。

すべてを厳密に守る必要はありませんが、一貫したルールを設けることでチーム開発がスムーズになります。

remとemの実践的な使い方

ここからは、実際のコーディングで役立つremとemの具体的な使い方を紹介します。理論を理解しても、実践で活かせなければ意味がありません。よく使われるパターンをコード例とともに解説しますので、ぜひ参考にしてください。

ルートフォントサイズの設定

remを効果的に使うためには、html要素のフォントサイズを適切に設定することが重要です。デフォルトの16pxをそのまま使う方法と、計算しやすい値に変更する方法があります。

よく使われるテクニックとして、html要素のフォントサイズを62.5%に設定する方法があります。16px×0.625=10pxとなり、1rem=10pxで計算できるようになります。

ただし、この方法を使う場合は、body要素で本文サイズを再設定する必要があります。10pxは本文には小さすぎるためです。

レスポンシブデザインでの活用

remはレスポンシブデザインと相性が良い単位です。メディアクエリでhtml要素のフォントサイズを変更するだけで、サイト全体のサイズを一括調整できます。

たとえば、スマートフォンではhtml要素を14px、デスクトップでは16pxに設定すると、すべてのrem指定が自動的にスケールします。個別に値を書き換える必要がないため、保守性が大幅に向上します。

コンポーネント設計での活用

ボタンやカードなど再利用するコンポーネントでは、emを活用すると便利です。親要素のフォントサイズを変えるだけで、コンポーネント全体のサイズが比例して変化します。

具体的には、ボタンのpaddingをemで指定しておくと、小サイズ・中サイズ・大サイズのボタンを作る際にフォントサイズを変えるだけで対応できます。個別にpaddingを調整する手間が省けます。

このように役割を分けることで、柔軟性と一貫性を両立できます。

アクセシビリティへの配慮

remを使う大きな理由の一つが、アクセシビリティへの対応です。視覚に障害のあるユーザーや高齢者は、ブラウザの文字サイズ設定を大きくして閲覧することがあります。

remやemで指定した要素は、ユーザーの設定に応じてサイズが変化するため、読みやすさを維持できます。pxで固定していると、ユーザーが設定を変更しても反映されません。

WCAG（Webコンテンツアクセシビリティガイドライン）でも、テキストサイズの拡大に対応することが推奨されています。

remとemを使うときの注意点

remとemは便利な単位ですが、使い方を誤ると思わぬ問題が発生することがあります。ここでは、よくある失敗パターンとその対処法を解説します。事前に注意点を把握しておくことで、トラブルを未然に防げます。

emのネスト問題

emを多階層で使用すると、サイズが指数関数的に変化する問題が発生します。これは「emのネスト問題」と呼ばれ、CSSの設計でよく起こる失敗パターンです。

対策としては、フォントサイズにはremを使い、同一要素内のpaddingやmarginにのみemを使う方法が有効です。こうすることで、ネストの影響を最小限に抑えられます。

ブラウザ互換性の確認

remは比較的新しい単位のため、古いブラウザではサポートされていないことがあります。特にInternet Explorer 8以前では使用できません。

ただし、現在主要なブラウザはすべてremをサポートしています。サポート対象ブラウザを事前に確認し、必要に応じてフォールバックを用意してください。

ブラウザ	remサポート	備考
Chrome	対応	全バージョン対応
Firefox	対応	全バージョン対応
Safari	対応	全バージョン対応
Edge	対応	全バージョン対応
IE9以降	対応	IE8以前は非対応

現在のWeb制作では、IE対応が不要なケースがほとんどですので、remを積極的に使って問題ありません。

チーム開発でのルール統一

複数人で開発する場合、単位の使い分けルールを事前に決めておくことが重要です。ルールがないと、人によってremを使ったりpxを使ったりして、コードの一貫性が失われます。

スタイルガイドやコーディング規約に単位のルールを明記し、チーム全体で共有しておくことをおすすめします。レビュー時のチェック項目に含めると、さらに効果的です。

よくある質問

remとemはどちらを優先して使うべきですか

基本的にはremを優先して使うことをおすすめします。remは予測可能性が高く、ネストによる影響を受けないため、保守性の高いCSSが書けます。emはコンポーネント内の相対サイズなど、限定的な用途で使うと効果的です。

pxは使わないほうがよいのですか

完全に使わないわけではありません。ボーダーの太さやbox-shadowのぼかし具合など、ユーザー設定に依存させたくない細かな装飾にはpxが適しています。ただし、フォントサイズや主要な余白にはremやemを使うことが推奨されています。

62.5%テクニックは現在も推奨されていますか

計算を簡単にするために今でも使われることがありますが、必須ではありません。CSS変数やSassなどのプリプロセッサを使えば、計算を自動化できるため、デフォルトの16pxをそのまま使う方法も一般的です。プロジェクトの方針に合わせて選択してください。

まとめ

CSSのremとemの違いは、サイズの基準となる参照元にあります。remはhtml要素を基準にし、emは親要素を基準にするという点を押さえておけば、使い分けに迷うことは少なくなるでしょう。

現代のWeb制作では、フォントサイズや余白にはremを使い、コンポーネント内の相対的なサイズ調整にはemを使うのが一般的です。pxはボーダーなどの細かな装飾に限定し、%はレイアウトの幅指定に活用すると、バランスの取れたCSSが書けます。

アクセシビリティやレスポンシブデザインの観点からも、相対単位を適切に使うことは重要です。今回紹介した内容を参考に、ぜひ実際のプロジェクトでremとemを使い分けてみてください。