px・rem・em・pt変換｜CSS単位を相互変換

px・rem・em変換とは

pxはCSSのabsolute length、remとemはfont-relative lengthです。このツールではrootとemの基準値を分け、元の値を一度CSS pxへ換算してから各単位へ変換します。

pxをremへ変換する方法

rem = px ÷ root font-sizeです。root font-sizeが16pxの場合、16pxは1rem、24pxは1.5rem、32pxは2remです。

remをpxへ変換する方法

px = rem × root font-sizeです。root font-sizeが18pxの場合、1remは18px、2remは36pxです。

pxをemへ変換する方法

em = px ÷ em基準font-sizeです。基準が20pxの場合、20pxは1em、30pxは1.5emです。

emをpxへ変換する方法

px = em × em基準font-sizeです。基準が18pxの場合、2emは36pxです。

remとemの違い

remはroot elementのfont-size基準、emは使用する要素・プロパティの文脈にあるfont-size基準です。どちらかが常に優れているのではなく、設計目的に応じて使い分けます。

ptとは

CSSのptはabsolute lengthで、仕様上1pt = 1/72in、1in = 96pxです。したがって12ptは16pxです。画面ではreference pixelを基準にする場合があり、物理的な印刷実寸を保証するものではありません。

pxとptの変換方法

pt = px × 72 ÷ 96、px = pt × 96 ÷ 72です。中間値は丸めず、最終表示時だけ指定桁数へ整形します。

1remは何pxか

1remが何pxかはroot elementのfont-sizeによって決まります。16pxは一般的な計算例の一つですが、CSS仕様として常に1remが16pxに固定されているわけではありません。

1emは何pxか

1emが何pxかは使用する文脈のfont-sizeによって変わります。margin・padding等では通常その要素のcomputed font-size、font-sizeプロパティ自身では親から継承されるcomputed font-sizeを基準に解決されます。

よくある質問