PX・Rem計算ツールとは？

ベースフォントサイズを基準に、pxとremを相互に換算するツールです。24pxが何remになるか、1.5remが何pxになるかを同じ画面で確認できます。

CSSでフォントサイズや余白をremに置き換えるときや、既存のrem値をpxの感覚で確認するときに使います。

使い方

1. ベースフォントサイズを入力するか、よく使うサイズから選びます。
2. px値かrem値のどちらかに値を入力します。
3. もう片方の値と計算式を確認し、結果をコピーします。

ベースフォントサイズを変えると、最後に編集した値をもう片方の単位に換算し直します。

主な設定項目

ベースフォントサイズ

1remの基準になる値です。ブラウザの既定は16pxです。プロジェクトのhtmlでフォントサイズを変えている場合は、その値に合わせます。

px値とrem値

どちらかを編集すると、もう片方が自動で更新されます。ベースが16pxのとき、24pxと入力すると1.5remが表示されます。

よく使う値

px値を基準にした一覧です。ベースフォントサイズを変えると、rem値が更新されます。各行のコピーアイコンでrem値をコピーできます。

活用シーン

• デザインデータのpx値をCSSのremに置き換えたいとき
• 既存CSSのrem値が実寸で何pxになるか確認したいとき
• ルートフォントサイズを変えたときの各サイズの変化を確認したいとき