| px | rem |
|---|
このツールについて
rem (root em) はルートの <html> 要素のフォントサイズを基準とする CSS の長さ単位であり、px は絶対的なデバイスピクセルです。ブラウザーの既定のルートサイズである 16px では、1rem は 16px に等しいため、24px は 1.5rem、10px は 0.625rem になります。rem はルートサイズに合わせてスケールするため、ベースを切り替えるとすべての rem 値が一度に再計算されます — このコンバーターでは、そのベースを設定し、どちらの方向にも値を変換できます。
px ベースのデザインシステムをスケーラブルな rem 単位へ移行したり、ユーザーのブラウザーのフォントサイズ設定を尊重するようにタイポグラフィや余白を指定したり、Tailwind やデザイントークンのスケールを確認したり、他者のスタイルシート内の rem 宣言の背後にあるピクセル値をリバースエンジニアリングしたりするのに使えます。リファレンス表は、選択したベースにおける一般的な px 段階の rem 換算値をひと目で示します。
rem は親要素ではなくルート (<html>) のフォントサイズを基準とします — これが、自身の親を基準とする em との唯一の違いです。
よくある質問
px を rem に変換するにはどうすればよいですか?
ピクセル値をルートフォントサイズで割ります。既定の 16px ルートでは、24px ÷ 16 = 1.5rem、10px ÷ 16 = 0.625rem になります。ベースを変えると、同じ px 値が異なる rem に対応します。
1rem は常に 16px ですか?
ルートフォントサイズがブラウザーの既定値である 16px の場合だけです。1rem は <html> 要素に設定された font-size に等しいため、ルートが 10px であれば 1rem は 10px になります。
rem と em の違いは何ですか?
rem は常にルート (<html>) のフォントサイズを基準とするため、ページ全体で一貫しています。em は自身の要素/親のフォントサイズを基準とするため、入れ子の em 値は累積し、ずれていくことがあります。