ピクセルからrem
現代のCSSレイアウト向けにピクセル値をremに変換します。remはユーザーのルートフォントサイズに合わせてスケールし、固定pxよりアクセシビリティに優れます。
pxからremへの変換方法
1. デザインからのピクセル値を入力します（例: 32 px）。
2. ルートフォントサイズを設定します（変更しなければ初期値16 px）。
3. rem結果をスタイルシートにコピーします。
4. フォントサイズ、余白、コンポーネントのスケールにはremを使い、必要ならヘアラインのボーダーにはpxを使います。
pxからremの例
本文と見出しの書体
16 px = 1 rem（初期値）。24 px = 1.5 remの見出し。14 px = 0.875 remの小さいテキスト。
カスタムルート10 px（デザインシステム）
一部のチームは html { font-size: 62.5% } を設定し、1 rem = 10 pxにします。すると32 pxのデザイントークン = 3.2 rem。
余白スケール
8 pxグリッド → ルート16 pxで0.5 rem。16 pxパディング = 1 rem。Tailwind風スケールで一貫したリズム。
pxをremに変換するとき
• アクセシブルなズーム付きのレスポンシブCSSでFigma仕様を実装するとき。
• remで定義されたデザインシステムのトークンに揃えるとき。
• ユーザーがブラウザのデフォルトフォントサイズを上書きするとき——remレイアウトは適応します。
コンポーネントCSSでのremとem
emはフォントサイズが違う入れ子要素の中で積み上がります——emのパディングはローカルテキストとともに大きくなります。remはルートに結びつき、コンポーネント間で予測可能な余白になります。多くのチームはレイアウトスケールにremを使い、emは字間やローカル書体に結びついた微調整だけに使います。
よくある質問
remとは何ですか？
rem = "root em"。1 remは親ではなくhtml要素のフォントサイズに等しいです。
なぜすべてpxにしないのですか？
固定pxはユーザーのフォント設定を無視します。remはアクセシビリティ（WCAG）のためにルートのスケールを尊重します。
デフォルトのルートフォントサイズは？
ほとんどのブラウザはhtmlで16 pxが初期値です。ユーザーは設定で変更できます。
式は？
rem = px ÷ rootFontSizePx。例: 20 px ÷ 16 = 1.25 rem。
remはマージンとパディングにも使えますか？
はい——remはfont-sizeだけでなく、任意のCSS長さプロパティに適用されます。