px⇔rem変換ツールとは？
px⇔rem変換ツールとは、CSSの絶対単位「px（ピクセル）」と相対単位「rem（レム）」を相互に変換するツールです。ベースフォントサイズを基準に、24pxが何remになるか、あるいは1.5remが何pxになるかを即座に計算できます。デザインカンプのpx値をCSSのrem値へ落とし込むときに便利です。
px⇔rem変換ツールの使い方
- 変換方向とベースを選ぶ「px→rem」または「rem→px」を選び、基準となるベースフォントサイズを指定します。標準は16px、62.5%指定のサイトなら10pxを選びます。
- 値を入力する変換したい数値を入力すると、結果がリアルタイムで表示されます。「コピー」でそのまま貼り付けられます。
- CSSをまとめて変換する下部のテキストエリアにCSSを貼り付けると、px値を一括でremに変換できます。変換したくない行には
/* keep-px */を書いておきます。
62.5%（1rem＝10px）テクニックとは
html { font-size: 62.5%; } と指定すると、ブラウザ標準の16pxの62.5%で 1rem＝10px になり、「16px＝1.6rem」「24px＝2.4rem」のように暗算しやすくなります。remはルート要素を基準に一貫してスケールするため、アクセシビリティやレスポンシブ設計の観点から推奨される単位です。本ツールではベースフォントサイズに10pxを指定すると同じ計算ができます。
こんな場面で使えます
デザインカンプの実装
カンプで指定されたpx値を、そのままremに変換してCSSに落とし込めます。
既存サイトのrem化
px指定のCSSをまとめて貼り付けて、一括でrem単位に置き換えられます。
レスポンシブ・アクセシビリティ対応
ユーザーのフォントサイズ設定に追従するrem単位への移行に役立ちます。
よくある質問
ベースフォントサイズは何を指定すればいいですか？
html要素にfont-sizeを指定していなければ、多くのブラウザの標準である16pxが基準です。font-size: 62.5% を指定している場合は10pxを選んでください。
emとの違いは何ですか？
emは親要素のフォントサイズを基準にするため、入れ子が深くなると計算が複雑になります。remは常にルート要素（html）を基準にするので、どこで使っても一貫したサイズになります。
入力した内容はサーバーに送信されますか？
いいえ、すべての計算はブラウザ内で行われ、入力内容が外部に送信・保存されることはありません。