px⇔rem変換ツール
ベースフォントサイズ（通常はhtml要素のfont-size、デフォルト16px）を指定したうえで、pxまたはremのどちらかの欄に数値を入力すると、もう一方の欄にリアルタイムに変換結果を表示します。CSSのfont-size・margin・paddingなどをpx指定からrem指定に置き換える際の換算に便利です。他のCSS系ツール（CSSグラデーションジェネレーターなど）もあわせてご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
通常はhtml要素に設定されているfont-size（多くのブラウザの初期値は16px）を指定します。
注意事項
- remはベースフォントサイズ（通常はhtml要素のfont-size）を基準にした相対単位です。ベースフォントサイズを変更すると、同じrem値でも実際のpxサイズが変わります。
- ベースフォントサイズを変更すると、入力済みのpx値を基準に、新しいベースフォントサイズでrem値が再計算されます（pxが空でremだけ入力されている場合は、rem値を基準にpx値を再計算します）。
- 計算結果は小数第5位で丸めて表示します。
用語解説
rem（root em）
ルート要素（html要素）のfont-sizeを基準とする相対単位。ブラウザの初期設定では1rem=16pxですが、html要素のfont-sizeを変更するとその倍率に応じて実際のサイズも変わります。親要素のフォントサイズに影響される em と異なり、常にルート要素を基準にするため、入れ子になったコンポーネントでもサイズが予測しやすいという利点があります。
px（pixel）
画面上の1ピクセルを基準とする絶対単位（CSSピクセル）。ユーザーがブラウザの文字サイズ設定を変更しても、px指定の要素サイズは変化しません。
ベースフォントサイズ
rem・emなどの相対単位の基準となるフォントサイズ。remの場合はhtml要素に設定されたfont-sizeを指します。ブラウザの初期値は16pxですが、CSSで変更することも、ユーザーがブラウザ設定で変更することもできます。
よくある質問
remとpxの換算の基準は何ですか？
remはhtml要素のfont-size（ベースフォントサイズ）を基準にした相対単位です。ブラウザの初期値は16pxなので、1remは16px、0.5remは8pxになります。
ベースフォントサイズを変えると入力済みの値はどうなりますか？
ベースフォントサイズを変更すると、入力済みのpx（なければrem）を基準に、もう一方が新しい基準で再計算されます。プロジェクトの設定に合わせて先に基準を指定しておくと確実です。
remとemはどう違いますか？
remは常にhtml要素を基準にしますが、emはその要素の親（または自身）のfont-sizeを基準にするため、入れ子になると値が積み重なります。サイズの見通しを立てやすいのはremです。
このページをシェア