CSSのフォントを見ると、rem、em、pxが書いてあったりします。
調べてみると、だいたいこんな感じの説明を目にすると思います。
remとemとpxの意味：
・px = 固定値（＝絶対値）
・rem = html基準（＝サイト全体との比率）
・em = 親要素基準
そこは私もわかります。
しかし、
pxとremとemはどうやって使い分ければいいの？
恥ずかしながら、私はよくわかっていませんでした。
WordPress10年以上やっててわかっていませんでした。
きっと、このままよくわからなくても、自分のサイトを運営するだけなら困らないと思います。
実際に10年以上困りませんでした。
しかし、
仕事でWEBディレクター始めたのにそうはいくか！
わからないを克服すべく調べてみました。
本記事は、その備忘録です。
使い分けを整理してみる
pxだと困る（と言われている）こと
一番なじみ深いのはpx。
絶対値ですからわかりやすくて管理しやすい。
じゃあどうして、pxだとまずいの？
ChatGPTくん。
理由は2つあります
- ブラウザの文字の大きさ調整に追随しづらい（アクセシビリティの問題）
- サイト全体の文字の大きさを一括で調整したいときに不便
さらに1について、具体的にはこういう説明がされていると思います。
- ブラウザでのズーム：pxでもremでも拡大される
- OSのユーザー設定：remの方が追従しやすい
だからremを使った方がいいという話です。
pxにおけるアクセシビリティの問題を考えてみる
しかし、実際にWindowsの設定を変えてみたところ、
Windowsの設定変えてみたよ！px指定の文字も大きくなるよ！
ChatGPTくん。
2026年現在では必ずしも正しくないんです
技術的な話は割愛しますが、「最近のブラウザは賢く追従するようになった」。
そのため、従来のpxとremの差に対する二元論的な説明が当てはまらなくなっているのだそうです。
正確には、
- Chrome + Windows環境：私が検証したとおり、追従する
- Firefox：ブラウザの細かい設定を使った場合、pxとremで差が出やすい
- macOS（Safari含）：システム全体のスケーリングを基本とするので、もともとpxだから読めないという問題が発生しづらい
Firefoxユーザーかつ細かくカスタマイズする人は少数派と思われます。
これに対応しないと割り切るなら、こんな感じにまとめられそうです。
remで解決すること
では「pxでだいたい問題ない」とするなら、remの意義はどこにあるのでしょう？
官公庁や大手企業のサイトならともかく。
個人サイトレベルですとベター程度ならさして強調する意味はなさそうに見えます。
しかし先述の「サイト全体の文字の大きさを一括で調整したいとき」。
この点においては現在でも数値を1箇所変更すればいいだけのremが優ります。
すなわち、remを使う意味は、
「サイトの保守性・設計管理」にあるといえます
remの方が「サイトの保守性・設計管理」の点でpxより明らかに優る。
アクセシビリティの観点でもベター。
従前ほどにアクセシビリティでrem絶対とまでは言えないまでも、やっぱりremを使うに越したことはなさそうです。
emが役に立つ場面
そしてここまで出てこないem。
emっていらなくない？
使い途がとんと思い浮かびません。
remでもpxでもいいとして、emはどんな場面で使えばいいのか。
ChatGPTくん。
ボタンなどのコンポーネントで使うと、内部比率を維持するのに便利なんです
おおっ！
例えばこちらのCSS。
.button {
font-size: 1rem;
padding: 0.5em 1em;
}
ここで文字の大きさを1.2remに変更したとします。
この時、paddingも追従して1.2倍になります。
比率を保つことによりデザインを維持できるというわけです。
この点において大事となるのはpx指定とem指定の差を意識することじゃないかと思います。
- どうしてこの箇所はpx指定なのか
- どうしてこの箇所はem指定なのか
例えば、何らかの表示上の制約を避けるためにpxで絶対指定している。
デザインを維持したいからemで相対している。
ここまで考えられるようになるとUI設計やチェックが捗ったりするのかも……とか思っちゃいます
まとめ
本記事ではpx、rem、emの使い分けについて、私なりに整理・学習してみました。
以下、その結果を図表にまとめてみました。
| 単位 | 覚え方 |
|---|---|
| rem | サイト全体との比率 |
| em | 部品内部との比率 |
| px | 固定サイズ |
用途別の詳細版がこちら。
本文で触れなかったことについても、簡単な理由を付しています。
| 用途 | 推奨単位 | 理由 |
|---|---|---|
| 本文・見出しの文字サイズ | rem | サイト全体の文字スケールを一括管理しやすい |
| 文字に連動する余白 | rem | フォントサイズ変更時もバランスが維持される |
| ボタン内部のpadding | em | ボタンの文字サイズ変更に合わせて余白も自動拡大・縮小される |
| アイコン付きボタンの間隔 | em | ボタン内部の比率を保ちやすい |
| border | px | 1px線など物理サイズで管理した方が自然 |
| box-shadow | px | デザイン上の固定サイズとして扱うため |
| max-width | px | レイアウト幅は固定値の方が予測しやすい |
| カラム幅 | px | デザイン崩れを防ぎやすい |
| アイキャッチ画像サイズ | px | 実画像サイズに合わせるため |
| Grid/Flexのgap | rem または px | 文字基準ならrem、レイアウト基準ならpx |
| positionの微調整 | px | 1～2px単位の調整が多いため |
あくまで私のまとめにすぎませんが、参考になりましたら幸いです。
一つ賢くなれた気がする、今日の私！
私はConoHa以外を勧めない。
2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。
レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。
※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。
従前：pxはアクセシビリティ悪い、remはアクセシビリティ良い
↓
現在：pxでだいたい問題ない、remならベター