pxとremの違い｜CSSでの使い分けと変換方法

Q: emとremの違いは？

`em` は**親要素のフォントサイズ**を基準にする相対単位、`rem` は**ルート要素（html）のフォントサイズ**を基準にする相対単位です。emは入れ子にすると倍率が累積するため、サイズの予測がつきにくくなります。複雑なネストでも安定するrem の方が扱いやすいケースが多いです。

Q: メディアクエリはpxとremどちらを使うべき？

`em` または `rem` を使うのが推奨されることが多いです。ブラウザのズームや文字サイズ設定との相性が良く、ユーザー設定に応じてブレイクポイントが連動します。ただ実装の単純さからpxを使うチームもあり、プロジェクトで方針を決めるのが現実的です。

Q: デザインカンプがpxで書かれている場合、どう変換すればいい？

デザインカンプの値を一律 `÷16` してremに変換するのが基本です。`12px → 0.75rem` のように、しっかり割り切れない値も小数で表現できます。

「16px と 1rem って同じじゃないの？」「最近の記事ではremを推奨していたけど、何が違う？」——CSSの単位 px と rem は似ているようで、ユーザーの設定変更への追従の仕方が大きく違います。

この記事では、pxとremの違い・計算式・remが推奨される理由・変換のコツを整理します。

px ↔ rem の換算をすばやく行いたい場合は、px ⇄ rem 変換ツールに値を入れるとそのまま結果が出ます。

pxとremの定義

px（ピクセル）

px はCSSにおける絶対単位です。「画面上のドットいくつ分」というイメージで、1pxは画面上の特定のサイズを指します。

注意点として、CSSの 1px は実際の物理ピクセル1個ではなく、**CSSピクセル（標準化された仮想的なピクセル）**として扱われます。高解像度ディスプレイでは複数の物理ピクセルが1CSSピクセルに対応します。

rem（root em）

rem は相対単位で、ルート要素（<html>）のフォントサイズを基準として計算されます。多くのブラウザのデフォルトでは <html> のフォントサイズが 16px なので、

1rem = 16px（デフォルト時）

ユーザーがブラウザの設定で文字サイズを大きくすると、<html> のフォントサイズが変わり、rem で書いた値もそれに比例して大きくなります。

計算式（base font-size 16px の場合）

ブラウザのデフォルト設定（base 16px）で、よく使う値は次のとおりです。

px	rem
8px	0.5rem
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
32px	2rem
40px	2.5rem
48px	3rem
64px	4rem

rem = px ÷ 16
px = rem × 16

base font-sizeが16px以外（html { font-size: 62.5%; } のように10pxにそろえる手法など）の場合は、計算式の分母を変更します。

アクセシビリティへの影響

remが重要視される最大の理由はアクセシビリティです。

ブラウザにはユーザーが文字サイズを変更できる機能があります（Chromeなら設定 → デザインから変更可能）。視力に課題のあるユーザーや、画面が小さなノートPCを使っているユーザーは、文字を一回り大きくして閲覧しているケースがあります。

px指定：ユーザーが設定で文字を大きくしても、px指定のサイズは変わらない
rem指定：<html> のフォントサイズが大きくなるため、本文・余白・コンポーネントが連動して大きくなる

px指定だけで作られたサイトは、ユーザーが文字を大きくしても本文が大きくなりません。読みづらさが残ったままになるため、本文・余白・コンポーネントのサイズはremを使うのが推奨されています。

pxとremの使い分け

「全部remにしないといけない」というわけではなく、用途で使い分けるのが現実的です。

場面	推奨単位	理由
本文・見出しのフォントサイズ	rem	ユーザー設定への追従
余白・コンポーネントの大きさ	rem	本文サイズ変更に連動
ボーダー（線）	px	1pxの細さがほしいケースが多い
シャドウやアイコンのオフセット	px	視覚的な調整がしやすい
メディアクエリ	em / rem	px指定だとブラウザのズームと相性が悪いケース

ボーダーは 1px solid のように細い線が欲しいシーンが多いため、ここはpxのほうが扱いやすいことが多いです。逆にフォントサイズを 12px のように直接書くと、ユーザーの文字サイズ設定が無効化されてしまいます。

px → rem の変換早見表（base 16px）

px	rem	主な用途
10px	0.625rem	補助テキスト
12px	0.75rem	キャプション
14px	0.875rem	サブテキスト
16px	1rem	本文の基準
18px	1.125rem	本文（やや大きめ）
20px	1.25rem	小見出し
24px	1.5rem	見出しh3〜h4
28px	1.75rem	見出しh3
32px	2rem	見出しh2
40px	2.5rem	見出しh1（小）
48px	3rem	見出しh1
64px	4rem	ヒーローテキスト

すばやく変換したい場合はpx ⇄ rem 変換ツールで計算できます。base font-sizeを変更しての換算にも対応します。

実装例

コンポーネントの基本

:root {
  font-size: 16px;
}

.card {
  padding: 1rem;        /* 16px */
  border-radius: 0.5rem; /* 8px */
  border: 1px solid #ddd; /* ボーダーはpxでOK */
}

.card-title {
  font-size: 1.25rem;   /* 20px */
  margin-bottom: 0.5rem;
}

よくある「62.5%」テクニック

:root {
  font-size: 62.5%; /* 16px × 0.625 = 10px */
}

body {
  font-size: 1.6rem; /* 16px */
}

<html> のフォントサイズを10pxにそろえることで、1.6rem = 16px のような分かりやすい換算ができます。一方、ユーザーがブラウザで文字サイズを変更したときの計算も連動するため、アクセシビリティを損なわずに換算が読みやすくなる手法として広く使われています。

ブラウザツールでの変換

px ⇄ rem 変換ツールでは、px・rem・em・%の値をリアルタイムに相互変換できます。

base font-sizeを 16px 以外（10px、14px など）にも切り替え可能
スペーシングのルール作りや、デザインカンプから実装値を起こす際に便利
ブラウザ内だけで処理されるため、入力値が外部に送信されない

スタイルガイドを作っているチームでは、px ↔ rem の換算表をスプレッドシートで持っているケースもありますが、すばやく1点だけ知りたいときはツールが手早く済みます。

よくある質問

Q. emとremの違いは？

em は親要素のフォントサイズを基準にする相対単位、rem はルート要素（html）のフォントサイズを基準にする相対単位です。emは入れ子にすると倍率が累積するため、サイズの予測がつきにくくなります。複雑なネストでも安定するrem の方が扱いやすいケースが多いです。

Q. メディアクエリはpxとremどちらを使うべき？

em または rem を使うのが推奨されることが多いです。ブラウザのズームや文字サイズ設定との相性が良く、ユーザー設定に応じてブレイクポイントが連動します。ただ実装の単純さからpxを使うチームもあり、プロジェクトで方針を決めるのが現実的です。

Q. デザインカンプがpxで書かれている場合、どう変換すればいい？

デザインカンプの値を一律 ÷16 してremに変換するのが基本です。12px → 0.75rem のように、しっかり割り切れない値も小数で表現できます。

Q. font-sizeは固定したいから px で書きたい

意図的にユーザー設定を無効にする使い方は、アクセシビリティ上は推奨されません。どうしても固定したい場合は、ボタンやアイコンなど一部のUIにとどめ、本文や見出しはremにしておくのが安全です。

関連ツール

px ⇄ rem 変換ツール — px・rem・em・%を相互変換

px ⇄ rem 変換ツールで今すぐ試す