px・pt・em・rem変換

このページでは、ピクセル、ポイント、パイカ、em、rem、インチなど10種類の単位の間でタイポグラフィの長さを換算できます。双方向の換算を1ページで行え、下の説明では換算係数、計算例、各単位の意味を紹介しています。

使い方

1. 選択欄で変換元と変換先を選びます（例: ピクセルとrem）。
2. どちらの欄に値を入力しても、もう一方の欄が自動で更新されます。
3. 入れ替えボタンで2つを入れ替えたり、「例を入れる」ですぐに使える値を入れたりできます。

計算式

rem (rem) = ピクセル (px) × 0.0625

係数は、下の換算係数表のツイップの値から求めた15 ÷ 240です。ほかの組み合わせも同じ方法で計算します。

計算例

フロントエンドの開発者は、ピクセルで測られたデザインのモックアップを受け取り、ページのルートのフォントサイズに従うよう、サイズをremで書き直すことがよくあります。

24 px × 0.0625 = 1.5 rem

タイポグラフィの長さの換算係数

各単位をツイップ（ツイップ）で表した値です。2つの単位を換算するときは、元の単位の係数を掛け、換算したい単位の係数で割ります。

このページの単位

ピクセル (px): CSSピクセル（px）には、96 px＝1 CSSインチ＝72 ptという固定された比率があります。実際の画面上の物理的な大きさやデバイスのピクセル数は、ディスプレイと拡大率によって変わります。この換算は、DPIが指定されていない画像の印刷サイズを決めるものではありません。

ポイント (pt): ここで使うポイント（pt）は、CSSおよびDTPのポイントで、1/72インチです。歴史的な印刷用のポイントや、紙の厚さに使う0.001インチのポイントとは異なります。

パイカ (pc): CSSのパイカ（pc）は12ポイント、つまり1/6インチです。したがって6パイカの組み幅は72 pt、すなわち96 CSS pxになります。

em (em): emは通常、その要素のフォントサイズに従い、font-sizeの宣言内では継承されたフォントサイズを指します。この変換器は適用されるフォントサイズを16 CSS pxと仮定して1 em＝12 ptとしており、Webサイトの実際のフォントサイズは読み取りません。

rem (rem): remはルート要素のフォントサイズに従います。この変換器はそのサイズを16 CSS pxに固定して、1 rem＝16 pxとしています。ルートのサイズはページやユーザー設定によって異なることがあるため、16 pxはCSSの定義ではなく仮定です。

インチ (in): 1インチはちょうど25.4ミリメートルです。CSSは1 in＝96 px＝72 pt＝6 pcを保ちますが、基準ピクセルが単位の基準になりうるため、画面上のCSSインチが実際の定規のインチと一致するとは限りません。

センチメートル (cm): センチメートルは1メートルの100分の1です。CSSの中では2.54 cm＝96 px＝72 ptで、実際の出力の物理的な大きさはレンダリングの倍率にも左右されます。

ミリメートル (mm): ミリメートルは1メートルの1000分の1です。CSSの中では25.4 mm＝96 px＝72 ptなので、印刷や表示の倍率を変えると、これらの単位の比率は保たれたまま物理的な大きさが変わることがあります。

Q（級・クォーターミリ） (Q): Q（クォーターミリメートル）は0.25 mmに相当するCSSの絶対単位で、写植の級数（Q数）と同じ大きさです。4 Qが1 mm、101.6 Qが1 CSSインチです。

ツイップ: ツイップはDTPポイントの20分の1、つまり1/1440インチです。たとえば12 ptは240ツイップです。