CSS単位換算ツール
値と単位を入力すると、px・rem・em・vw・vh・pt などCSSの主要な単位に一括換算します。vw・vh は画面サイズ、rem・em はフォントサイズを基準にするため、基準値を指定して計算できます。remだけを換算したい場合はpx⇔rem変換ツール、可変フォントサイズの式はCSS clamp()計算ツールも便利です。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
基準値
remはルート、em・%・chは親のフォントサイズ、vw・vmin・vmaxは画面幅と画面高さを基準に計算します。
換算結果
注意事項
- chは「0」の文字幅で、フォントによって異なります。このツールでは親フォントサイズの0.5倍で近似しています。
- pt・pc・cm・mm・inはCSS仕様に基づく固定比率(1in=96px=72pt=2.54cm)で換算します。実際の印刷サイズや画面上の物理サイズとは一致しない場合があります。
- vw・vhはスクロールバーを含む画面サイズが基準です。モバイルブラウザのアドレスバーが動的に変わる環境ではsvh・dvhなど別の単位が必要になることがあります(このツールの対象外)。
- 計算結果は小数第5位で丸めて表示します。
用語解説
vw・vh・vmin・vmax
ビューポート(表示領域)の幅・高さの1%を1とする単位。vminは幅と高さの小さい方、vmaxは大きい方の1%です。
rem と em
remはルート(html要素)のfont-sizeが基準、emはその要素の親のfont-sizeが基準です(font-size以外のプロパティでは要素自身のfont-size)。
ch
使用中のフォントにおける「0」の幅を1とする単位。等幅フォントでは文字数に近い幅を指定できます。
よくある質問
vwやvhをpxに換算するには何を指定しますか?
画面幅と画面高さ(px)を指定します。たとえば画面幅1920pxなら1vw=19.2pxです。ブラウザの開発者ツールで確認した実際の表示領域の値を入れると正確です。
remとemで基準が違うのはなぜですか?
remはhtml要素のfont-size、emは親要素のfont-sizeを基準にするためです。このツールでは「ルートフォントサイズ」と「親フォントサイズ」を別々に指定できます。
chの換算結果はどのくらい正確ですか?
chはフォントごとの「0」の幅なので正確な値は環境で変わります。このツールでは親フォントサイズの0.5倍で近似するため、目安としてお使いください。
ptやcmの換算はCSS仕様どおりですか?
はい、1in=96px=72pt=2.54cm、1pc=16pxというCSSの固定比率で計算します。実際の画面の物理サイズは端末のDPIで変わるため一致しないことがあります。
このページをシェア
