px・rem変換｜基準フォントサイズを指定して相互変換

このツールでできること

指定した基準フォントサイズを使って、pxからrem、またはremからpxへ変換できます。結果は1remや24pxのように単位付きで表示・コピーされるため、CSS宣言の値として貼り付けられます。

使い方

1. 変換する値を、単位を付けずに半角数字で入力します。
2. pxからrem、またはremからpxの変換方向を選びます。
3. 制作対象のCSSに合わせて、基準フォントサイズのpx相当値を確認または変更します。
4. 「変換する」を押します。
5. 必要に応じて「結果をコピー」を押します。

「方向を入れ替える」を押すと、入力値と基準フォントサイズを残したまま変換方向を交換できます。入れ替え後は、もう一度「変換する」を押してください。

「クリア」を押すと入力と結果を消し、方向をpxからrem、基準フォントサイズを16へ戻します。

入力例・出力例

数値欄に32、基準フォントサイズ欄に16を入力し、pxからremを選ぶと、結果は2remです。結果の下には32px = 2rem（基準フォントサイズ：16px）と換算内容が表示されます。

反対に、数値欄へ1.5を入力してremからpxを選ぶと、同じ基準値16で結果は24pxです。基準値を10にすると、入力値32のpxからremへの結果は3.2remになります。

基準フォントサイズとは

remは、文書のルート要素のフォントサイズを基準にする相対単位です。基準が16pxなら1remは16px相当、基準が10pxなら1remは10px相当として換算します。

このツールの初期値16は計算用の初期設定です。ToolRollページや制作対象サイトのCSSを読み取って自動設定するものではありません。制作対象で使われているルートフォントサイズのpx相当値を確認して入力してください。

よくある利用場面

• CSSの固定px値をremへ置き換えるとき
• デザインカンプの寸法をサイトの基準フォントサイズへ合わせるとき
• rem指定から実際のpx相当値を確認するとき

処理仕様

• 初期の基準フォントサイズは16pxです。制作対象のCSSに合わせて、0より大きい値へ変更できます。
• pxからremへは「px値÷基準フォントサイズ」、remからpxへは「rem値×基準フォントサイズ」で計算します。
• 変換値には半角数字の整数・小数・負数を入力できます。.5や5.、前後の空白、正しい3桁区切りのカンマも使用できます。
• 基準フォントサイズにも半角数字の整数・小数を入力できますが、0、負数、負の0は使用できません。
• 全角数字、指数表記、16pxのような単位付き入力、数値途中の空白、複数行、不正なカンマは使用できません。
• 変換値と基準フォントサイズは、それぞれ数字15桁以内です。符号、小数点、カンマと、数値の先頭側に連続する0は桁数に数えませんが、小数部の末尾の0は数えます。たとえば123456789012345は入力でき、1234567890123456は入力できません。
• 結果はJavaScriptの数値精度内で最大15桁の有効数字へ整えます。指数表記は通常の小数表記へ直し、小数部の不要な末尾の0を除き、負の0は0と表示します。

入力データについて

入力した値と換算処理はブラウザ内だけで扱い、ToolRollのサーバーや外部サービスへ送信しません。外部ライブラリ、Cookie、Web Storage、IndexedDBは使用しません。「結果をコピー」を押したときだけ、ブラウザのクリップボード機能へ単位付き結果を渡します。