使い方
- サイトでルートのフォントサイズを変更している場合は、その値を設定します（たとえば、html { font-size: 62.5% }では10pxになります）。
- どちらかの欄に値を入力すると、pxからrem、またはremからpxに変換できます。親要素を基準にする場合はemに切り替えてください。
- 一覧でよく使う値をすぐに確認できます。またはCSSスニペットを貼り付けて、すべてのpxの長さを一括変換し、結果をコピーできます。
仕組み
rem = px ÷ ルートのフォントサイズです。ルートを既定の16pxにした場合、24pxは1.5rem、14pxは0.875remです。emも同じ式で計算しますが、親要素のフォントサイズを基準にします。そのため、入れ子になったemの値は掛け合わされます。remは常にルートを基準にするため、この問題を避けられます。
フォントサイズや余白にremを使うと、ブラウザーの設定で既定のフォントサイズを大きくしたときにテキストも拡大され、弱視の方に役立ちます。値は小数点以下4桁に丸められます。
スニペット変換では、pxが続く数値を変換します。コメント、url(…)、引用符で囲まれた文字列は変更しません。「1pxを維持」を選択すると1pxはそのままにします（細い境界線は通常1pxのままにします）。0pxは0に変換します。既定では@mediaと@containerの条件は変更しません。メディアクエリでは、設定したルートのフォントサイズに関係なく、remとemは常にブラウザーの初期フォントサイズを基準にするためです。calc()の意味までは解析せず、内側のpxの数値を置き換えますが、長さごとに変換するため、変換結果は正しくなります。
使用例
既定のルートサイズ
ルートが16pxの場合：12px = 0.75rem、20px = 1.25rem、32px = 2rem、0.5rem = 8px。
62.5%のテクニック
CSSでhtml { font-size: 62.5% }を設定すると、ルートは10pxになります。その場合、14px = 1.4rem、24px = 2.4remです。ルートのフォントサイズ欄に10を入力してください。
コンポーネントの変換
「1pxの値を維持」をオンにすると、padding: 24px 16px; border: 1px solid #ddd; は padding: 1.5rem 1rem; border: 1px solid #ddd; に変換されます。
よくある質問
remとemはどちらを使うべきですか？
ほとんどのフォントサイズ、余白、レイアウトには、どこでも予測どおりに使えるremを使用してください。ボタン内の余白など、コンポーネント自身の文字サイズに合わせて拡大・縮小したい場合はemを使います。
メディアクエリをremに変換しないのはなぜですか？
変換できますが、メディアクエリ内の1remは常にブラウザーの既定のフォントサイズ（通常は16px）を表し、htmlのフォントサイズは基準になりません。そのため、変換は既定でスキップされます。16で割る場合は、このオプションをオフにしてください。
アクセシビリティの面でremはpxより優れていますか？
フォントサイズには、はい。remはユーザーが設定した既定のフォントサイズを反映しますが、pxのフォントサイズは反映しません。ブラウザーのズームはどちらの単位でも機能します。
プライバシー
変換処理とCSSスニペットの処理はブラウザー内で行われ、外部に送信されることはありません。