Rem vs Px: モダンCSSにおける各単位の使い分けとその方法

CSSのremとpxを比較し、アクセシビリティへの影響を理解した上で、62.5%テクニックを活用してスケーラブルなレスポンシブレイアウトを構築する方法を解説する。

Jul 10, 2025 · 4 min read

レスポンシブWebサイトを構築する際、適切なCSS単位を選択することは、デザインがデバイスやユーザー設定にどのように適応するかに大きな違いをもたらします。remとpx単位の使い分けに関する議論は長年続いていますが、2024年の開発環境においては、それぞれが適切な場面について明確なガイドラインが存在します。

重要なポイント

Rem単位はルート要素のフォントサイズに相対的で、アクセシブルでユーザー設定を尊重するデザインの作成に最適
ピクセル単位は固定サイズの測定値で、ユーザー設定に関係なく一貫性を保つ
アクセシビリティの利点は、フォントサイズとほとんどのレイアウトプロパティでrem単位を強く支持
モダンフレームワーク（Bootstrap 5やMaterial UIなど）はremベースのアプローチを標準化
62.5%テクニックは1remを10pxに等しくすることでrem計算を簡素化

CSS単位の理解：絶対単位 vs 相対単位

rem vs pxの比較に入る前に、これら2つの単位タイプの基本的な違いを理解することが重要です：

絶対単位

ピクセル（px）はCSSの絶対単位です。要素のフォントサイズを16pxに設定すると、親要素やユーザー設定に関係なく、常にその正確なサイズになります。

.fixed-size {
  font-size: 16px;
  padding: 24px;
  width: 300px;
}

相対単位

Rem（rem）は、ルート要素のフォントサイズに基づいてスケールする相対単位です。名前は文字通り「root em」を意味します。デフォルトでは、ブラウザはルートフォントサイズを16pxに設定するため、明示的に変更されない限り1remは16pxに等しくなります。

html {
  font-size: 16px; /* ほとんどのブラウザでのデフォルト */
}

.scalable-element {
  font-size: 1rem;    /* デフォルトで16px */
  padding: 1.5rem;    /* デフォルトで24px */
  width: 18.75rem;    /* デフォルトで300px */
}

Rem vs Px：主な違い

rem単位とpx単位の主な違いは、デザインがユーザー設定やデバイス特性にどのように応答するかに影響します：

機能	Rem	Px
ユーザー設定に応じたスケーリング	✅ ユーザーがブラウザフォントサイズを変更した際にスケール	❌ ユーザー設定に関係なく固定
ネストされた要素間の一貫性	✅ 常にルート要素に相対	✅ 常に一貫
計算の複雑さ	❌ デザイン仕様からの変換が必要	✅ デザインツールと直接一致
アクセシビリティサポート	✅ ユーザーフォントサイズ設定を尊重	❌ ユーザーフォントサイズ設定を無視
ブラウザズーム動作	✅ 適切にスケール	✅ 適切にスケール（モダンブラウザで）

Rem単位のアクセシビリティ上の利点

rem単位を使用する最も強力な論拠はアクセシビリティです。ユーザーがブラウザのデフォルトフォントサイズを調整した場合（視覚障害のある方によく見られる行為）、rem単位を使用したデザインはこれらの設定を尊重します。

簡単な実演を以下に示します：

<div class="container">
  <p class="pixel-text">このテキストは16px（固定サイズ）</p>
  <p class="rem-text">このテキストは1rem（設定に応じてスケール）</p>
</div>

.pixel-text {
  font-size: 16px;
}

.rem-text {
  font-size: 1rem;
}

ユーザーがブラウザのデフォルトフォントサイズを16pxから24pxに増加させた場合：

pixel-textは16pxのまま
rem-textは24px（1 × 24px）に増加

この動作は、より大きなテキストに依存する視覚障害のあるユーザーにとって重要です。WebAIMの低視力ユーザー調査によると、75%以上がブラウザのデフォルトフォントサイズを変更していると報告しています。

62.5%テクニック：Rem計算の簡素化

rem単位に関する一般的な不満の一つは、ピクセルよりも計算が困難であることです。デフォルトの16pxルートフォントサイズは、以下のような一般的な値を意味します：

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
20px = 1.25rem

これらの小数値は、ピクセルで作業するよりも直感的ではありません。62.5%テクニックは、ルートフォントサイズを10pxに設定することでこれを解決し、計算をはるかに簡単にします：

html {
  font-size: 62.5%; /* 16pxの62.5% = 10px */
}

.element {
  font-size: 1.6rem;  /* 16px */
  margin: 2.4rem;     /* 24px */
  padding: 0.8rem;    /* 8px */
}

このアプローチでは、単純に小数点を移動することで、remとピクセル間の変換を頭の中で行うことができます：

16px = 1.6rem
24px = 2.4rem
8px = 0.8rem

このテクニックは、開発をより直感的にしながらアクセシビリティの利点を維持します。

Rem単位を使用すべき場合

Rem単位は以下に最適です：

1. タイポグラフィ

body {
  font-size: 1rem;      /* ベースフォントサイズ */
}

h1 {
  font-size: 2.5rem;    /* ユーザー設定に応じてスケール */
}

h2 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
  line-height: 1.5;     /* フォントサイズに相対 */
}

2. レイアウトスペーシング

.container {
  max-width: 75rem;     /* デフォルトサイズで1200px */
  padding: 2rem;
  margin: 0 auto;
}

.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
}

3. コンポーネントサイジング

.button {
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  font-size: 1rem;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

4. メディアクエリ

/* モバイルファーストアプローチ */
.container {
  width: 100%;
}

/* タブレットブレークポイント */
@media (min-width: 48rem) {  /* デフォルトサイズで768px */
  .container {
    width: 46rem;
  }
}

/* デスクトップブレークポイント */
@media (min-width: 64rem) {  /* デフォルトサイズで1024px */
  .container {
    width: 60rem;
  }
}

ピクセル単位を使用すべき場合

remの利点にもかかわらず、ピクセルの方が適している場合もあります：

1. ボーダー幅

.card {
  border: 1px solid #ddd;  /* ボーダーは1pxで最も美しく見えることが多い */
}

2. ボックスシャドウ

.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* 小さく精密な効果 */
}

3. 細かいディテール

.separator {
  height: 1px;
  background-color: #eee;
}

4. ピクセル精度が重要な場合

.pixel-art {
  image-rendering: pixelated;
  width: 32px;
  height: 32px;
}

モダンデザインシステムにおけるRem

主要なデザインシステムとフレームワークは、rem単位を大幅に標準化しています：

Bootstrap 5は、16pxのルートフォントサイズでほとんどのサイジングにremを使用
Material UIは62.5%テクニックのサポートでremを使用
Tailwind CSSはデフォルトでremベースのスペーシングスケールを提供

この業界の変化は、アクセシビリティとレスポンシブデザインへの重視の高まりを反映しています。

実践的な実装戦略

新しいプロジェクトでは、このアプローチを検討してください：

62.5%テクニックを使用してベースフォントサイズを設定：

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem; /* 16px相当にリセット */
}

ほとんどのプロパティでremを使用：

.container {
  max-width: 120rem;  /* 1200px */
  padding: 2rem;      /* 20px */
}

細かいディテールにはピクセルを使用：

.card {
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

異なるブラウザフォントサイズでテストして、デザインが適切にスケールすることを確認。

既存プロジェクトのPxからRemへの変換

既存のプロジェクトをピクセルからrem単位に移行する場合：

ルートフォントサイズ戦略を決定（デフォルト16pxまたは62.5%テクニック）

プリプロセッサで変換関数を作成：

// SCSSを使用
@function rem($pixels) {
  @return ($pixels / 16) * 1rem;
}

.element {
  font-size: rem(16);    // 1rem
  margin: rem(24);       // 1.5rem
  padding: rem(8) rem(16); // 0.5rem 1rem
}

タイポグラフィとレイアウトプロパティから開始し、その後他のプロパティに拡張
異なるデバイスとブラウザ設定で徹底的にテスト

よくある落とし穴と解決策

1. Remを使用したネストされた要素

em単位とは異なり、remは常にルートフォントサイズを参照するため、ネストされた要素でのサイズの複合化を心配する必要はありません：

/* em単位の場合（問題あり） */
.parent {
  font-size: 1.2em;
}
.parent .child {
  font-size: 1.2em; /* ベースフォントサイズの1.44倍として計算 */
}

/* rem単位の場合（一貫性あり） */
.parent {
  font-size: 1.2rem;
}
.parent .child {
  font-size: 1.2rem; /* 依然としてルートフォントサイズの1.2倍 */
}

2. メディアクエリの動作

重要な注意点：メディアクエリでのremは通常のCSSとは異なる動作をします。メディアクエリでは、remは常にブラウザのデフォルトフォントサイズに基づき、カスタムルートフォントサイズではありません：

html {
  font-size: 62.5%; /* 通常のCSSで1rem = 10pxに設定 */
}

@media (min-width: 64rem) { /* 依然として1024px（64 × 16px）として評価 */
  /* ここにスタイル */
}

3. ブラウザサポートの考慮事項

rem単位はモダンブラウザで優れたサポートを持っていますが、非常に古いブラウザではフォールバックが必要な場合があります：

.element {
  font-size: 16px;      /* 古いブラウザ用のフォールバック */
  font-size: 1rem;      /* モダンブラウザはこれを使用 */
}

結論

rem vs pxの議論は、ほとんどのモダンWeb開発シナリオで明確な勝者があります：rem単位は、デザインにおいて優れたアクセシビリティ、スケーラビリティ、一貫性を提供します。ピクセルは細かいディテールやピクセルパーフェクトな要素にはまだ適用場面がありますが、タイポグラフィ、レイアウト、コンポーネントサイジングではremがデフォルトの選択肢であるべきです。

適切な場面でのピクセルの戦略的使用とともにremファーストアプローチを採用することで、異なるデバイスやユーザー設定に優雅に適応する、よりアクセシブルでユーザーフレンドリーなデザインを作成できます。

FAQ

rem単位を使用することでパフォーマンスに影響はありますか？

いいえ、rem単位とpx単位の間に意味のあるパフォーマンス差はありません。モダンブラウザは両方の単位タイプを効率的に計算します。

rem単位はブラウザズームでどのように動作しますか？

rem単位とpx単位の両方は、ユーザーがブラウザをズームした際に比例的にスケールします。主な違いは、rem単位がブラウザのフォントサイズ設定にも応答することで、px単位は応答しないことです。

同じプロジェクトでrem単位とpx単位を混在させることはできますか？

はい、ハイブリッドアプローチはしばしば効果的です。ユーザー設定に応じてスケールすべき要素（タイポグラフィ、レイアウト）にはremを使用し、精密なサイジングが重要な要素（ボーダー、細かいディテール）にはpxを使用します。

62.5%テクニックを使用する必要がありますか？

いいえ、オプションです。計算を簡素化するため多くの開発者が好みますが、ブラウザのデフォルトルートフォントサイズ（通常16px）を使用することも完全に問題ありません。

rem単位はCSSフレームワークでどのように動作しますか？

Bootstrap 5やTailwind CSSなどのほとんどのモダンCSSフレームワークは、内部的にすでにrem単位を使用しています。具体的なガイドラインについては、フレームワークのドキュメントを確認してください。

rem単位よりもem単位が良い場合はありますか？

em単位は、ルートではなく親のフォントサイズに相対的にスケールすべき要素に有用です。一般的な例として、パディングがボタンのテキストサイズに応じてスケールすべきボタンがあります。

FigmaやSketchなどのデザインツールでrem単位をどのように扱いますか？

ほとんどのデザインツールはピクセルで動作します。デザインを実装する際は、ピクセル値をremに変換する必要があります。標準的な16pxルートの場合は16で割り（または0.0625を掛け）、62.5%テクニックの場合は10で割ります。

ビューポート単位（vw、vh）とremはどうですか？

ビューポート単位は、フォントサイズではなくビューポートの寸法に基づいています。rem単位を補完するもので、画面サイズに応じてスケールするレイアウトの作成に有用です。デザインの異なる側面に両方の使用を検討してください。

rem単位はコンテナクエリでうまく動作しますか？

はい、rem単位はコンテナクエリでうまく動作します。コンテナクエリはコンテナのサイズに基づいてブレークポイントを確立し、そのコンテナ内のrem単位は依然としてルートフォントサイズを参照します。

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.

Self-Host Try Cloud Free

Loved by thousands of developers