PX・REM・EMとは何か
Webデザインのサイズ単位は絶対単位と相対単位の2種類に分かれます。PX（ピクセル）は画面上の固定された点のサイズを表す絶対単位で、画面サイズやユーザー設定の影響を受けません。一方、REMとEMはフォントサイズを基準に計算する相対単位で、レスポンシブWebデザインにおいてより柔軟でアクセシブルなレイアウトを実現します。適切な単位の選択は、デバイスやユーザー設定への対応力に大きく影響します。
REMとEMの違い
REM（Root EM）は常にルート要素であるhtml タグのフォントサイズを基準に計算されます。ブラウザのデフォルトは16pxなので、1rem = 16pxです。EMは親要素のフォントサイズを基準にするため、ネストが深くなると複雑な動作をすることがあります。一貫性の維持しやすさからほとんどのプロジェクトではREMが好まれます。
レスポンシブデザインでREMを使う利点
ユーザーがブラウザのデフォルトフォントサイズを変更すると、REM基準の全要素が比例して調整されます。これにより視覚障害者や高齢者など大きなテキストを必要とするユーザーへのアクセシビリティが大幅に向上します。またルートのfont-sizeひとつを変えるだけでレイアウト全体のサイズを一括制御できるため、レスポンシブ対応も容易です。
よくある質問（FAQ）
Q. 10pxをベースにして計算しやすくするには？
A. CSSで html { font-size: 62.5%; } と設定するとデフォルト16pxの62.5%で10pxになり、1rem = 10pxとなって計算が簡単になります。このツールのベース値を10に変更すれば対応した換算ができます。
Q. REMとEMはどちらを使うべきですか？
A. 基本的にはREMをお勧めします。ネスト構造でも予測可能な動作をするためです。EMはボタンのパディングなど、そのコンポーネントのフォントサイズに比例させたい場合に有効です。
Q. 小数点が多くなる場合はどうすればいいですか？
A. 実務では小数点3桁までが一般的です。CSSは小数値も正確にレンダリングしますが、0.0625remのような複雑な値は可読性のために丸めて使うこともあります。