CSS単位変換ツール
px、rem、em、%、vw、vhなどの主要なCSS単位を相互に計算・変換できるオンラインツールです。基準フォントサイズやビューポート幅・高さを指定して正確に換算できます。
ツールを実行
CSS単位変換ツールは、Webデザインやコーディングで使われる各種CSS単位を相互に換算できるオンライン計算ツールです。px、rem、em、%、pt、vw、vh、cm、mm、inといった幅広い単位に対応しています。基準フォントサイズ（デフォルト16px）やビューポートの幅（1920px）・高さ（1080px）を設定できるため、レスポンシブWebデザインにおけるフォントサイズやレイアウトの相対値計算を素早く行えます。入力値を一度ピクセル値に変換してから指定した目標単位へ換算し、結果は小数点以下4桁に四捨五入して表示されます。デザインカンプのピクセル指定をremやvwへ書き換える作業を効率化します。
使い方
- 変換したい数値を入力します。
- 変換元の単位（px、rem、em、vwなど）を選択します。
- 変換先の単位を選択します。
- 必要に応じて基準フォントサイズやビューポートの幅・高さを設定します。
- 変換を実行すると、計算結果が画面に表示されます。
使用例
- 「16px」を基準フォントサイズ16pxの設定で「rem」に変換すると、「1rem」が得られます。
- ビューポート幅1920pxの環境で「192px」を「vw」に変換すると、「10vw」が算出されます。
- 基準フォントサイズ16pxのもとで「1.5em」を「px」に変換すると、「24px」となります。
よくある質問
pxからremへの変換計算はどのように行われますか？
入力されたピクセル値を基準フォントサイズ（デフォルトは16px）で除算して算出されます。例えば32pxを基準値16pxで割ると2remになります。
vwやvhの計算にはどの値が使用されますか？
ビューポート幅またはビューポート高さの設定値をもとに計算されます。例えばビューポート幅が1920pxの場合、192pxは10vwに変換されます。
基準フォントサイズを0に設定した場合はどうなりますか？
基準フォントサイズに0が設定された状態でemやrem、%へ変換した場合、ゼロ除算を防止して結果は0となります。