CSS
px・em・rem の違い
初級読み方：ピクセル・エム・レム のちがい｜英語：px vs em vs rem
pxは固定サイズ、emは親要素の文字サイズ基準、remはルート要素の文字サイズ基準の単位。
やさしい説明
pxは固定サイズ。emは親要素のフォントサイズ基準。remはルート（html）のフォントサイズ基準で、レスポンシブデザインに便利です。
px は「絶対的な大きさ」で、どこで使っても同じサイズです。rem は「相対的な大きさ」で、ユーザーがブラウザの文字サイズを変更すると一緒に変わります。
現代のWeb開発では rem を基本にするのがおすすめです。アクセシビリティ（文字サイズ変更への対応）に優れています。
具体例・使い方
/* px: 常に16ピクセル（固定） */
font-size: 16px;
/* rem: htmlの文字サイズ×1倍（デフォルト16px） */
font-size: 1rem; /* = 16px */
font-size: 1.5rem; /* = 24px */
/* em: 親の文字サイズ×倍率（入れ子で変わる） */
font-size: 1.2em; /* 親が16pxなら19.2px */3つの違いを一覧で
| 単位 | 基準 | 向いている用途 |
|---|---|---|
px | 固定（絶対値） | ボーダー・影など細かい値 |
em | 親要素の文字サイズ | ボタン内の余白など親に比例させたい所 |
rem | html（ルート）の文字サイズ | フォントサイズ・余白の基本 |
いつ使う？
- フォントサイズ・余白 →
rem（基本はこれ） - ボーダー・影など細かい値 →
px - 親要素に比例させたいパーツ →
em - 迷ったら →
rem
htmlの基準は通常 16px。つまり 1rem = 16px、1.5rem = 24px と覚えると暗算しやすいです。「remの数字 × 16」がpx換算値になります。
間違いやすいポイント
❌ emが入れ子で予想外のサイズになる
emは親のサイズを基準にするので、1.2em の要素の中にさらに 1.2em を置くと「1.2 × 1.2 = 1.44倍」と掛け算で膨らみます。remなら常にルート基準なので予測しやすいです。
❌ フォントサイズを px で固定してしまう
font-size: 16px のように固定すると、ユーザーがブラウザの文字サイズを大きくしても変わりません。視力の弱い人に届きにくくなるため、文字は rem 指定が親切です。
よくある疑問
Q: どれを使えばいい？
A: 迷ったらremがおすすめです。ページ全体で統一感が出て、レスポンシブ対応もしやすいです。
Q: emが入れ子で計算が複雑になるのはなぜ？
A: emは親の文字サイズが基準なので、入れ子が深くなると掛け算になります。remならルート基準なので一定です。
関連用語
📖 関連レッスン
レッスンを見る →