CSS単位変換
px, rem, em & pt
設定可能な基本フォントサイズで CSS の px、rem、em、pt 値を変換します。デザイントークン、タイポグラフィ、レスポンシブレイアウトに便利です。
この変換はブラウザ内だけで実行され、サーバーへはアップロードされません。
px
- ルート / 基準フォントサイズ16px
- 単位px
実際の CSS では em は親要素の font-size に依存します。このツールは rem・em を同じルート/基準値で近似換算します。
- px
- rem
- em
- pt
このツールについて
設定可能なルート / 基準フォントサイズ（既定 16px）で CSS の px・rem・em・pt を換算します。デザイントークンやタイポグラフィ、レスポンシブ spacing 向けです。
実 CSS では rem はルート、em は現在（多くは親）要素の font-size 相対です。このツールは rem・em に同じ基準を使うため、em は近似値です。pt は CSS 96dpi（1pt = 96/72 px）に従います。
When to use
- Figma / ハンドオフの px を rem の spacing・スケールに合わせる
- root が 16px でないときの
1.5rem/12ptを確認する - スタイルガイド用の px ↔ rem トークン表を作る
- 印刷向け pt を画面 CSS と突き合わせる
使い方
- 数値と元単位（px / rem / em / pt）を選びます。
- ルート / 基準フォントサイズを px で設定します（既定 16）。全行が即時更新されます。
- 行ごとの Copy、または一括 Copy で値を取ります。
- CSS で
emを入れ子にする場合は、親の computed font-size も確認してください。
例
| 入力 / 設定 | 出力 | メモ |
|---|---|---|
16px, base 16 | 16.00px; 1.0000rem; 1.0000em; 12.00pt | 既定ブラウザ root |
24px, base 16 | 24.00px; 1.5000rem; 1.5000em; 18.00pt | 見出し / spacing |
1.5rem, base 16 | 24.00px; 1.5000rem; 1.5000em; 18.00pt | 相対 → px |
12pt, base 16 | 16.00px; 1.0000rem; 1.0000em; 12.00pt | CSS 96dpi の端 |
実務での落とし穴
- em は親依存。 親
1.25em内の1.2emは1.2 × rootではなく積み上がります。表の em は基準＝要素 font-size という近似です。 html { font-size: 62.5% }などで root を変えたら、base を実際のルート px に合わせます。- ここでの pt は 96dpi の CSS 絶対単位で、任意 DPI の印刷ポイントとは別です。
参考資料
最終更新: 2026-07-27
よくある質問
- どの CSS 単位に対応していますか？
- px、rem、em、pt です。% や vw/vh は対象外です。
- ルート / 基準フォントサイズとは？
- 1rem（この電卓では 1em も）に使うピクセル値です。既定は多くのブラウザの `html` 既定に合わせた 16px で、 デザインシステムの root が異なれば変更してください。
- rem と em は同じ結果になりますか？
- このツールでは同じ基準で近似します。実 CSS では rem は常にルート基準、em は現在（多くは親）の font-size に掛かり、入れ子だと値が積み上がります。
- pt はどう換算されますか？
- CSS の 96dpi では 1pt = 96/72 px（約 1.333px）です。印刷 DPI とは別物です。