このツールについて
pxからremへの変換と逆の計算を行います。remと実際のルート文字サイズを入力すると、対応するピクセル値をブラウザー内で計算します。既存のスタイルに使われている相対的な寸法を理解するのに役立ちます。
使い方
- 変換するrem値を入力します。
- ルート文字サイズを0より大きい値で入力します。既定値は16pxです。
- pxの結果と計算の説明を確認します。
- 結果をコピーするか、サンプルでよく使う変換を確認します。
使用例
- 1.5rem × 16px = 24px。
- 2rem × 16px = 32px。
- 1.25rem × 20px = 25px。
計算の仕組み
計算式はpx = rem × rootFontSizeです。pxからremへの変換と同じ関数を使用し、表示時に浮動小数点演算による不要な末尾の桁を除きます。ブラウザーのルート文字サイズは通常16pxですが、プロジェクトのCSSで変更されている場合があります。
主な用途
- remで記述したスタイルとデザインのピクセル値を照合する。
- テーマでルート文字サイズを変えたときの寸法の変化を把握する。
- 文字サイズ、余白、コンテナー寸法を手早く確認する。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
1remが必ず16pxとは限らないのはなぜですか？
remはルート要素の実際の文字サイズを基準にします。プロジェクトのCSSやユーザー設定によって基準値が変わることがあります。
ルート文字サイズを18や20にできますか？
はい。ツールが受け付ける範囲内で、0より大きい有効な値を指定できます。16に固定する必要はありません。
ブラウザーのズームで計算式は変わりますか？
この式が表すのはCSSピクセルとremの関係です。画面上の物理ピクセル数は、ズーム率やデバイスピクセル比にも影響されます。
小数が付かない結果があるのはなぜですか？
整数に近い結果では、末尾の不要な0を取り除きます。CSSにそのまま使いやすい表記にするためです。