Px ↔ Rem 変換
任意のルートフォントサイズで px と rem を双方向に変換 —— 1 つの値も、CSS ブロック全体も一度で。元の単位の数値だけを書き換え、それ以外は一切触らず、よく使う文字サイズと余白の一覧表も付きます。
Windows デスクトップ版もあります。
このツールについて
1rem が何 px になるかは、ルートフォントサイズが決めます。初期状態のブラウザでは 16px なので 24px は 1.5rem ですが、暗算しやすくするためにルートを 62.5%（10px）に設定するプロジェクトも多く、15px や 18px のデザインシステムもあります。だからここではルートサイズは入力項目です。同じ 24px でも、ルート 16 では 1.5rem、ルート 10 では 2.4rem、ルート 18 では 1.333rem になります。
書き換え範囲は意図的に狭くしています。px → rem モードでは px で書かれた値だけを書き換えます。貼り付けたブロックが移行途中でも、すでに rem の宣言はそのまま残るので、同じブロックを何度通しても二重変換は起きません。結果の上にある件数表示で「いくつ書き換わったか」を必ず確認できます。入力が思っていたものと違った場合に一番早く気ける手がかりです。
丸めも作業のうちです。ルート 16 では 14px はちょうど 0.875rem、しかし 15px は 0.9375rem —— 4 桁も並ぶとスタイルシートに書きたくありません。桁数を 2〜3 にすれば、そのまま貼り付けられる値が出ます。下の一覧には頻出サイズを載せたので、そこにあれば打つ必要すらありません。
よくある質問
- ルートフォントサイズは何を入れればいいですか？
- スタイルシートで html（または :root）に実際に設定している値です。ブラウザの初期値は 16px で、CSS で変更していなければ 16 で正しいです。62.5% のリセットを使っているなら 10。ルートを間違えると、すべての値が同じ比率でずれるため、見た目には何も壊れていないのが一番厄介な失敗です。
- 一部の値が書き換えられないのはなぜですか？
- 元の単位だけを書き換えるためです。px → rem モードでは、すでに rem の値は素通りします。これは意図的な仕様で、移行途中のスタイルシートを一度で変換でき、同じ宣言を二重に換算しません。逆の単位が必要なら方向を切り替えてもう一度実行してください。
- 全部 rem にすべきですか？
- 通常はそうではありません。rem は、ユーザーの文字サイズ設定に追従すべき文字・余白・レイアウトに適しています。1px の境界線やボックスシャドウ、メディアクエリのブレークポイントは、意図的に px のままにされることが多いです。このツールは選んだ部分を書き換えるだけで、どの単位に属するかは判断しません。
- CSS 関数や変数、コメントも扱えますか？
- テキスト内の「数値+単位」のすべての出現を書き換えます。calc のような関数呼び出しの中、カスタムプロパティの値、コメント内も含みます。通常はそれが望ましい動作ですが、件数は確認してください。宣言だけのつもりで件数が多い場合、コメント内も一致しています。
- 貼り付けた内容は送信されますか？
- いいえ。変換はページ内の文字列演算そのものです。サーバーも通信も記録もなく、ネットワークを切っても動作します —— 自分で確認できます。