PX ↔ REM ↔ EM ↔ PT 変換ツール
CSSの単位を双方向に変換 — ルートサイズを自由に設定でき、px・rem・em・ptが連動して更新されます。
529回閲覧
各単位の関係
rem = px ÷ ルートサイズ(既定値16px。よって24px = 1.5rem)。emも同じ考え方ですが、要素自身が継承しているフォントサイズ — このツールの「コンテキストサイズ」欄 — を基準にします。ptは印刷用の単位で、1pt = 1.333px(96dpi ÷ 72)です。どの欄に入力しても、残りの値が自動的に追従します。
実用的な指針: フォントサイズや余白にはremを使うと、ユーザーのフォントサイズ設定に合わせてレイアウト全体が拡大縮小されます。コンポーネント自身のテキストに追従させたいパディングにはem。絶対にスケールしてほしくないもの(1px境界線など)にはpxを使いましょう。ルートを10pxに設定する古い「62.5%テクニック」は暗算が楽になりますが、コンポーネントライブラリの多くは16pxを前提にしているため、新規プロジェクトでは避けるのが無難です。
よくある質問
em の値が rem と違うのはなぜ?
emは直近で設定されたフォントサイズに掛け算され、入れ子になるほど積み重なります。1.5emの要素の中にある1.5emは、ルートの2.25倍になります。remは常にルートを基準にするため、この予測しやすさが選ばれる理由です。
1ptは本当に1.333pxですか?
CSSでは定義上そうです: 1in = 96px = 72pt。印刷用PDFとCSSはこの比率で一致していますが、実際の物理サイズは画面の実DPIに依存します。
関連ツール
問題を報告
PX ↔ REM ↔ EM ↔ PT 変換ツール