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 */いつ使う？
フォントサイズや余白 → rem。ボーダーや影など細かい値 → px。親要素に比例させたい → em。迷ったら rem を使いましょう。
間違いやすいポイント
❌ emが入れ子で予想外のサイズになる
emは親のサイズを基準にするので、入れ子が深くなると計算が複雑になります。rem なら常にルート基準なので予測しやすいです。
よくある疑問
Q: どれを使えばいい？
A: 迷ったらremがおすすめです。ページ全体で統一感が出て、レスポンシブ対応もしやすいです。
Q: emが入れ子で計算が複雑になるのはなぜ？
A: emは親の文字サイズが基準なので、入れ子が深くなると掛け算になります。remならルート基準なので一定です。
関連用語
📖 関連レッスン
レッスンを見る →