コンテンツへスキップ
CSS Unit Converter
px・rem・em・ptを相互に変換します。
概要
- px・rem・em・ptの間でCSSの単位を相互に変換するツールです。
- rem・emとpx間の変換には基準フォントサイズ（初期値16px）を使用します。サイトのルート要素のフォントサイズが異なる場合は、その値に変更して計算できます。
- 1つの数値を入力するだけで、4つの単位すべての値が一度に表示されます。
使い方
- 「値」に変換したい数値を入力します。
- 「変換元の単位」でpx・rem・em・ptのいずれかを選択します。
- rem・emへ変換する場合の基準となる「基準フォントサイズ」を指定します（初期値は16px）。
- 「変換する」ボタンをクリックすると、4つの単位すべての値が表示されます。
入力例・出力例
入力
16px(基準フォントサイズ16px)
出力
1rem / 1em / 12pt
利用シーン
- デザインカンプに記載されたpx単位の数値を、rem単位でのCSS実装に変換する
- 印刷物やPDFで使われるpt単位の数値を、Web制作で使うpx・rem単位に変換する
- ルート要素のフォントサイズを変更したプロジェクトで、既存のpx値をremへ計算し直す
よくある質問
remとemの変換結果が同じなのはなぜですか？
親要素のフォントサイズという文脈情報を持たないため、このツールではemもrem同様に基準フォントサイズを基準として計算しています。実際のemは親要素のフォントサイズに依存する点にご注意ください。
ptはどのような計算式で変換していますか？
CSS仕様の定義（1in = 96px = 72pt）に基づき、1pt = 96/72 pxとして変換しています。
基準フォントサイズは何に使われますか？
rem・emとpx間の変換に使用します。ブラウザの初期値は16pxですが、サイトによってルート要素のフォントサイズが異なる場合は、その値に変更してください。
注意点
- emはrem同様に基準フォントサイズを基準として計算しています。実際のemは親要素のフォントサイズに依存するため、厳密な値とは異なる場合があります。
- ptはCSS仕様の定義（1in = 96px = 72pt）に基づいて変換しています。
- 基準フォントサイズはrem・emとpx間の変換にのみ使用され、ptの変換には影響しません。