1秒でもコーディングを速くするために──pxとremのやさしい使い分け
「デザインカンプのこの文字、24pxだから……ええっと、16で割るから1.5remか」
「じゃあ、この14pxは……？ 14 ÷ 16 ＝ ……0.875rem！？ 暗算できるわけがないでしょ！！」
フロントエンドのコーディングをしていて、こんな風に電卓アプリとエディタを往復した経験はありませんか？
私（わたくし）は数え切れないほどあります。笑
この「PX / REM Converter」は、そんな地味で、毎日発生する「暗算のイライラ」から開発者を救うために作られた、完全ブラウザ完結型の実験場です。
ただ数値を変換するだけでなく、文字が実際にどう見えるかのプレビュー機能や、CSS変数を一括でコピーできるボタンも用意しました。ぜひ、あなたの強力な相棒として役立ててください！
🧪 料理店でたとえる px と rem
px は「お皿」に近い絶対指定です。ブラウザの文字サイズ設定を変えても、指定した px はその設定には追従しません。ページのズームでは伸びます。「お皿のサイズは絶対に変わらない」わけではありません。
rem は「盛り付け」に近い相対指定です。ルート（html）の font-size を見るので、ユーザーが文字を大きくしていると一緒に伸びます。画面幅のレスポンシブ（メディアクエリ）とは別の話です。動かしたくないものは px、文字サイズ設定に合わせて伸びてほしいものは rem。
実務での使い分け
「どれをpxにして、どれをremにすればいいの？」と迷ったときは、次を目安にしてください。
| 場面 | 推奨単位 | 理由 |
|---|---|---|
| 本文・見出しの文字 | REM | ルートの font-size（ユーザーの文字サイズ設定）に追従して読みやすさを保つため。 |
| 余白(Margin / Padding) | REM | 文字が大きくなったとき、余白も一緒にスケールしてバランスを保つため。 |
| 行間 (line-height) | 単位なし（例: 1.5） | 親の font-size に対する倍率になります。原則すべて rem にはしません。 |
| 1px / 2px の罫線（ボーダー） | PX | 16px基準なら 1px は 0.0625rem です。サブピクセルのにじみは起きることがありますが例外です。細い線は px のほうが読みやすく、意図した太さを保ちやすいです。 |
| アイコン | 場合による | 変形してほしくないなら px。フォントに連動させるなら rem。 |
⚠️ 文字サイズだけをremにするときの注意
よくあるミスが、「文字サイズだけをremにして、余白をpxのままにする」ことです。
ユーザーが文字サイズを大きくしたとき、文字だけ巨大化して余白は狭いままになり、窮屈になります。
文字をremにするなら、周囲の余白もremで揃える。rem が見るのはルートの font-size です。画面幅のメディアクエリとは別の話です。
📖 このツールの使い方
基準サイズの意味
上の基準入力は、プロジェクトの html（ルート）の font-size です。ブラウザ既定はだいたい 16px。10px 運用なら 10 を入れてください。計算は「px ÷ 基準 = rem」です。16 と 10 のボタンは、よくある値へのショートカットです。
早見表の追加と削除
よく使う px を入力して「リストに追加」できます。不要な行は × で削除、↩ リセットで初期リストに戻せます。行の px をクリックすると、上の変換欄とプレビューにセットされます。
コードコピーは主要サイズのみ
「コードをコピー」に含まれるのは 10 / 12 / 14 / 16 / 18 / 20 / 24 / 28 / 32 / 40 / 48 / 64px です。早見表に足した行や、表にある 8px・11px などは含まれません。