できること
CSS の長さをピクセルと相対単位の rem・em の間で変換するツールです。24px のように 1 つの値を入力すれば 1.5rem が得られ、1 行に 1 つずつ並べればまとめて変換でき、スタイルシートを丸ごと貼り付ければ中の px 値がすべてその場で書き換わります。早見表には、現在の基準フォントサイズでの 1px〜128px のよく使うサイズを表示します。データはブラウザーの外に出ません。
使い方
- CSS を貼り付けるか、1 行に 1 つずつ値を入力します。単位なしの数値は px（逆方向のときは rem/em）として扱い、もう一方の単位で書かれた値は逆向きに変換します。
- 「基準フォントサイズ」を設定します。どのブラウザーも既定は 16px です。
html { font-size: 62.5% }として 1rem = 10px にしているプロジェクトもあります。 - 「変換方向」（px → rem / rem → px）、「単位」（rem / em）、残す「小数桁数」を選びます。
- 必要なら「この値未満は px のまま」を設定し、1px のボーダーなどの細線を px のまま残します。
- 結果の上のボタンでコピーします。
例
/* before */
.title { font-size: 24px; margin-bottom: 12px; }
/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }パーセント、色、url() 内のファイル名、.mt-16px のようなクラス名など、px 以外の値は変更しません。0px は 0 になります。
px・rem・em
- px は絶対単位で、読者が設定した文字サイズを無視します。
- rem（root em）は
html要素のフォントサイズの倍数です。読者がブラウザーを 20px に設定すると 1rem は 20px になり、レイアウト全体が拡大されます。 - em は現在の要素のフォントサイズの倍数です。所属する文字に合わせたい余白に便利ですが、入れ子の em は掛け算になるため、基本は rem のほうが安全です。
メディアクエリも変換します。@media (min-width: 768px) は 48rem（または 48em）になり、読者が文字を拡大してもブレークポイントの整合が保たれます。なお、メディアクエリ内の rem と em はどちらもブラウザーの既定フォントサイズが基準で、html に指定した値ではありません。
よくある質問
› px を rem に変換するには？
ピクセル値をルートのフォントサイズで割ります。ブラウザーの既定値 16px なら、24px ÷ 16 = 1.5rem、12px ÷ 16 = 0.75rem です。逆は掛け算で、2rem × 16 = 32px です。
› rem と em の違いは？
rem はルート要素 html のフォントサイズが基準なので、ページ内のどこでも 1rem は同じ大きさです。em は現在の要素のフォントサイズ（font-size 自体では親要素）が基準で、入れ子にすると掛け算で効いてきます。ほとんどのサイズは rem、ボタンの余白のように自分の文字に合わせて伸縮させたいものは em が向いています。
› px ではなく rem を使う理由は？
読者がブラウザー設定で既定の文字サイズを大きくすると、rem のサイズは一緒に大きくなりますが、px は変わりません。rem を使うとアクセシビリティを保てるうえ、ルートの値を 1 つ変えるだけでデザイン全体を拡大縮小できます。
› 1px のボーダーも変換すべきですか？
通常は不要です。0.0625rem の細線は拡大率によってはぼやけたり消えたりします。「この値未満は px のまま」を 2px にすれば、ボーダーなどのごく小さい値は px のまま残ります。