pxとremの変換に迷わない — CSS単位（px/rem/em/pt）相互変換ツールの使い方
公開日：2026年7月18日 対象ツール：px⇄rem⇄em⇄pt 変換
CSSでフォントサイズや余白を組むとき、「このpxはremでいくつ？」と手が止まることはありませんか。remはアクセシビリティやレスポンシブに向く一方で、pxからの換算をいちいち電卓で計算するのは手間です。
このpx⇄rem⇄em⇄pt 変換ツールは、1つの値を入力すると内部でpxに正規化し、px・rem・em・ptのすべてに換算した内訳を同時に表示します。Web制作者が日々のコーディングで単位を素早く確認するのに役立ちます。
このツールでできること
- px・rem・em・ptの4単位を相互に変換できます。
- rem用のルート font-sizeと、em用の基準 font-size（親要素）を別々に指定できます。
- 入力に応じてリアルタイムで再計算し、各値をワンクリックでコピーできます。
使い方
- ルート font-size（px）を設定します。remの基準で、多くのブラウザの初期値である16pxが既定です。
- 基準 font-size（px）を設定します。emの基準となる親要素のfont-sizeで、既定は16pxです。
- 変換したい値を入力し、単位（px / rem / em / pt）を選びます。
- px・rem・em・ptへ換算した内訳が表示されるので、必要な値をコピーします。
こんなときに便利
デザインカンプの数値をCSSに落とすときに重宝します。ルート16px基準なら、24px = 24 ÷ 16 = 1.5rem、18px = 1.125rem、14px = 0.875remとまとめて確認できます。逆に1.5remは1.5 × 16 = 24pxです。
印刷物やWordの文書サイズを合わせたいときは、pt換算も便利です。本ツールは96dpiを前提に1px = 0.75ptで換算するため、16px = 16 × 0.75 = 12ptのように対応づけられます。
よくある質問
remとemは何が違いますか？
remは常にルート要素（html）のfont-size基準で値が安定します。一方emは親要素のfont-size基準で、入れ子の階層ごとに実効値が変わります。本ツールはremの「ルート font-size」とemの「基準 font-size」を別々に入力できるため、例えば基準20pxのとき30px = 1.5emのように、親が16px以外でも正しく換算できます。
なぜpxではなくremを使うのですか？
remはルートのfont-sizeを基準にするため、ユーザーがブラウザの文字サイズ設定を変えると一緒に拡大縮小します。px固定よりも閲覧者の設定に追従しやすく、アクセシビリティやレスポンシブ対応がしやすくなります。
単位換算はミスが起きやすい地味な作業です。このツールで4単位をまとめて確認し、迷いなくコーディングを進めてください。