pxとremの違いと変換方法｜rem＝px÷16の計算とem・ptの使い分け
公開日：2026年7月18日 更新日：2026年8月30日 運営：シルギア（Analyzegear, Inc.） 対象ツール：px⇄rem⇄em⇄pt 変換
デザインカンプの「24px」をCSSに書くとき、pxのままにするか、remに直すか、emにするかで迷った経験はありませんか。見た目が同じでも、px・rem・emは「何を基準に伸び縮みするか」が根本的に違います。理解しないままpxを固定で書き続けると、ユーザーが文字を大きくしても効かない、入れ子で意図せず文字が肥大する、といった問題につながります。この記事では3単位の仕組みと計算方法を、検算した数値とともに整理します。本ツールは値を1つ入力すると内部でpxに正規化し、px・rem・em・ptすべての相当値を同時に表示します。
px・rem・emは「基準」が違う
まず3つの単位の立ち位置を押さえます。同じ長さの単位でも、基準にするものが異なります。
- px：固定のピクセル。基準を持たない絶対的な指定で、何があっても常に同じ大きさになります。
- rem：ルート要素（html）のfont-sizeが基準の相対単位。「root em」の略で、ページ全体で基準が1つに定まります。
- em：その要素の親要素のfont-sizeが基準の相対単位。基準が場所ごとに変わるのが特徴です。
ptは印刷由来のポイントで、本ツールでは96dpiを前提に px×0.75 で扱います。remとemはどちらも「font-sizeの何倍か」ですが、そのfont-sizeがページ共通（rem）か親ごとに変わる（em）かが決定的な差です。
rem＝px÷ルートfont-size で計算する
remへの変換式はシンプルで、rem＝pxの値÷ルートfont-sizeです。多くのブラウザの初期値は16pxなので、通常は「÷16」で求まります。実際に計算してみます（ルート16px基準）。
- 24px ＝ 24 ÷ 16 ＝ 1.5rem
- 18px ＝ 18 ÷ 16 ＝ 1.125rem
- 20px ＝ 20 ÷ 16 ＝ 1.25rem
- 14px ＝ 14 ÷ 16 ＝ 0.875rem
- 32px ＝ 32 ÷ 16 ＝ 2rem
- 10px ＝ 10 ÷ 16 ＝ 0.625rem
逆にremからpxへ戻すときは掛け算で、1.5rem ＝ 1.5 × 16 ＝ 24px、2rem ＝ 32px です。ルートを変えれば基準も変わり、ルートを18pxにすると 1rem＝18px、27px ＝ 27 ÷ 18 ＝ 1.5rem です。本ツールの「ルートfont-size」欄を書き換えると早見表もその基準に連動するので、16px以外の設計でも確認できます。
emは親要素が基準——remとの決定的な違い
emはその要素の親要素のfont-sizeを基準にします。親が16pxなら 30px ＝ 30 ÷ 16 ＝ 約1.875em、親が20pxなら 30px ＝ 30 ÷ 20 ＝ 1.5em。同じ30pxでも親次第で値が変わるのがemです。
やっかいなのは入れ子（ネスト）で効果が累積する点です。親が16pxのとき子にfont-size:1.25em（＝20px）を指定し、その孫にも1.25emを指定すると、孫の実効サイズは 20 × 1.25 ＝ 25px になります。深く入れ子にするとemの文字がじわじわ大きくなるのはこのためです。remならルートが唯一の基準なので、入れ子にしても 1.25rem は常に20pxで安定します。本ツールはem用の基準を「基準font-size（親要素）」欄で独立指定できるため、親が16px以外でも正しく換算できます。
なぜpx固定よりremが推奨されるのか
remが好まれる最大の理由はアクセシビリティと文字拡大への追従です。ブラウザには文字サイズ設定があり、既定の16pxを20pxなどに変更しているユーザーがいます。font-sizeをremで書いておくと、ルートが20pxに変われば 1rem＝20px となり本文も見出しも一斉に拡大します。ところがpxで固定すると、設定をどんなに大きくしても文字はそのまま（例えば14pxのまま）で、読みづらさが解消されません。
目安として、本文はremで指定しておくのが無難です。1remは基準そのもの、1.125remは少し大きめの本文、0.875remは注記など小さめ、といった感覚で使えます。一方、線の太さ（border）など「文字と一緒に伸び縮みしてほしくないもの」はpxのままが自然です。すべてをremにする必要はなく、拡大に追従させたい要素かどうかで選び分けるのがコツです。
レスポンシブでの単位の使い分け
実務では要素の性質に応じて単位を選び分けます。おおまかな指針は次の通りです。
- 本文・見出しのfont-size：remが基本。拡大設定に追従し、文字の比率を1か所（ルート）で管理できます。
- ボタン内の余白（padding）やアイコン間隔：emが便利。要素のfont-sizeに連動し、文字を大きくすると余白も広がります。
- 1pxの罫線や画像の実寸：pxが素直。拡大に巻き込みたくない細部は固定値が扱いやすいです。
「62.5%」の小技もあります。ルートに font-size:62.5% を指定すると 16 × 0.625 ＝ 10px となり 1rem＝10px。24px ＝ 2.4rem、18px ＝ 1.8rem と、pxを10で割るだけでremに直せて計算が楽です。ただし数値感覚が一般的な16px前提とずれるため、チームでは方針の統一が無難です。
pt換算と早見表・よくある失敗
WordやPDFなど印刷系の文書とサイズを合わせたいときはpt換算が役立ちます。本ツールは96dpiを前提に 1px ＝ 0.75pt（逆に 1pt ≒ 1.333px）で換算します。16px ＝ 12pt、24px ＝ 24 × 0.75 ＝ 18pt、逆に12pt ＝ 12 ÷ 0.75 ＝ 16px です。
最後に、つまずきやすいポイントを挙げます。
- remとemを混同する：入れ子で値が累積するのはem。安定させたいならrem、親に連動させたいならemと役割を分けます。
- ルート16pxを前提にし続ける：ルートを変えた設計やユーザー設定では 1rem≠16px です。基準を確認してから換算しましょう。
- すべてをpx固定にする：文字拡大に追従せず不利です。追従させたい要素はremへ。
単位換算はミスの出やすい地味な作業です。本ツールで4単位を同時に確認しながら、基準を意識して迷いなくコーディングを進めてください。