px⇄rem⇄em⇄pt 変換

px・rem・em・pt は、Webやデザインで使う長さ（フォントサイズなど）の単位です。px は固定のピクセル、rem と em は font-size を基準にした相対単位、pt は印刷由来のポイントです。本ツールは1つの値を入力すると、まず内部で px に正規化し、px・rem・em・pt のすべてに換算した内訳を同時に表示します。CSSの単位換算を素早く確認したいときに使えます。

rem はルート要素（html）の font-size を基準にします。一般的なブラウザの初期値は16pxで、このとき 1rem = 16px です。例えば16px基準なら、24px は 24 ÷ 16 = 1.5rem、32px は 2rem になります。逆に 1.5rem は 1.5 × 16 = 24px です。本ツールでは「ルート font-size」入力がこの基準にあたります。

em は親要素（またはその要素自身）の font-size を基準とする相対単位で、入れ子の階層で実効値が変わるのが rem との大きな違いです。本ツールは em の基準を独立した「基準 font-size」入力で指定できるため、親が16px以外でも正しく換算できます。例えば基準20pxのとき 30px は 30 ÷ 20 = 1.5em になります。

pt（ポイント）は印刷由来の単位です。本ツールは96dpiを前提に 1px = 0.75pt で換算します（逆に 1pt ≒ 1.333px）。例えば16px は 16 × 0.75 = 12pt、12pt は 12 ÷ 0.75 = 16px です。Wordなどの文書で使うフォントサイズをWebのpxに対応づけたいときの目安になります。

実務では、px を rem に直したい場面がよくあります。手順はシンプルで、「px の値 ÷ ルート font-size」です。16px基準なら、18px = 1.125rem、20px = 1.25rem、14px = 0.875rem のように求まります。本ツールに px を入力すれば、この計算をまとめて確認できます。

rem を使う利点は、ルート要素の font-size だけを基準にするため値が安定し、レスポンシブやアクセシビリティに向くことです。ユーザーがブラウザの文字サイズ設定を変えると rem 指定の文字も一緒に拡大縮小するため、px 固定よりも閲覧者の設定に追従しやすくなります。