CSS
px・em・rem の違い
読み方：ピクセル・エム・レム のちがい
pxは固定サイズ、emは親要素の文字サイズ基準、remはルート要素の文字サイズ基準の単位。
やさしい説明
pxは固定サイズ。emは親要素のフォントサイズ基準。remはルート（html）のフォントサイズ基準で、レスポンシブデザインに便利です。
具体例・使い方
16px → 常に16ピクセル（固定）
1em → 親の文字サイズ×1倍（入れ子で変わる）
1rem → htmlの文字サイズ×1倍（常に一定で予測しやすい）
よくある疑問
Q: どれを使えばいい？
A: 迷ったらremがおすすめです。ページ全体で統一感が出て、レスポンシブ対応もしやすいです。
Q: emが入れ子で計算が複雑になるのはなぜ？
A: emは親の文字サイズが基準なので、入れ子が深くなると掛け算になります。remならルート基準なので一定です。
関連用語
📖 関連レッスン
レッスンを見る →