straighten PX ↔ REM ↔ EM ↔ PT 変換ツール star

仕組み

rem = px ÷ ルートサイズ(既定値16px。つまり24px = 1.5rem)です。emも同じ考え方ですが、要素自身が継承しているフォントサイズ — このツールの「コンテキストサイズ」欄 — を基準にします。ptは印刷用の単位で、1pt = 1.333px(96dpi ÷ 72)です。どの欄に入力しても、残りの値が自動的に追従します。

具体例:ルートが16pxの場合、1.25remの見出しは20pxで表示されます。自身のフォントサイズが1.125rem(18px)であるコンポーネントの中に0.875emのラベルを入れ子にすると、15.75pxで表示されます — emはルートではなく直近の親要素を基準に積み重なるためです。

知っておきたいこと

• remはルート要素を基準としており、固定されたブラウザの既定値を基準にしているわけではありません。16pxという前提は、誰もそれを変更していない場合にのみ成り立ちます。ユーザーがアクセシビリティ設定でブラウザの既定フォントサイズを大きくした場合 — 視力の弱い方の間ではよくある設定です — rem基準のすべての値がそれに比例して拡大します。一方、ピクセル値はそうなりません。16pxの段落は、ユーザーのブラウザ設定にかかわらず常に16pxのままです。
• これが、アクセシビリティのガイドラインがフォントサイズや余白にremを推奨する理由です。remで構築されたレイアウトは、ユーザーが選んだ文字サイズをすべての要素にわたって尊重します。見出し、本文、そしてその周囲の余白がすべて一緒に拡大し、文字が大きくなってもデザインが崩れず、比例した状態を保てます。
• emは自身の入れ子構造に対して相対的であり、積み重なっていきます。1.5emの大きさを持つ要素の中にある1.5emの値は、ルートの2.25倍になります — これはボタンの内側の余白のように、コンポーネント自身のフォントサイズに合わせて拡大縮小すべき部分には便利ですが、何段階も入れ子になっている場合はリスクがあります。
• 古くからある「62.5%テクニック」 — ルートを10pxに設定して1rem = 10pxとし、暗算をしやすくする方法 — は今でも機能しますが、新規プロジェクトでは避けたほうが無難です。多くのコンポーネントライブラリは16pxのルートを前提としており、これを上書きするとサードパーティのコードで予期しないサイズになることがあります。
• ptはpxを基準に定義されており、その逆ではありません。CSSでは1in = 96px = 72ptという比率が固定されているため、1pt = 96/72 = 正確に1.333pxとなります。これは主に、ptがネイティブの単位である印刷用やPDF用にデザインを書き出す際に重要になります — この換算によって、画面上のサイズと印刷サイズの一貫性が保たれます。