PXからREM変換ツール
ブラウザの初期値は16pxです。
このツールとは PXからREM変換ツール
PXからREM変換ツールは、CSSのサイズをピクセルとrem単位の間で変換します。1remはページのルートフォントサイズに等しく、ブラウザは初期値として16pxを設定するため、16pxは1rem、24pxは1.5remになります。どちらかの欄に値を入力すると、もう一方が即座に更新されます。プロジェクトが別の基準を使っている場合はルートフォントサイズの欄を変更してください（ルートを62.5%に設定して10pxを1remにするのがよく使われる手法です）。
使い方
- プロジェクトが16pxの初期値と異なる場合は、ルートフォントサイズを設定する。
- ピクセルの欄にpx値を入力して、rem換算を確認する。
- またはREMの欄にrem値を入力して、px換算を確認する。
- 欄の横のコピーアイコンで、どちらの結果もコピーする。
- クリアを押して欄をリセットし、新しい変換を始める。
こんなときに便利
レスポンシブなレイアウトを作っていて、24pxの見出しをremで指定したいですか。24と入力すれば1.5remが得られ、そのままスタイルシートに貼り付けられます。固定ピクセルから拡大縮小できるremへデザインを切り替えると、文字や余白が読者のブラウザ設定に連動するので、既定のフォントサイズを大きくした人にはレイアウト全体が一緒に拡大され、あなたのピクセル値に固定されたままになりません。
よくある質問
pxをremに変換するにはどうすればいいですか？
ピクセル値をルートフォントサイズで割ります。既定の16pxルートでは、24pxは24 / 16 = 1.5rem、8pxは8 / 16 = 0.5remです。逆に変換するには、rem値にルートフォントサイズを掛けます。16pxルートでの1.25remは1.25 * 16 = 20pxです。
既定のルートフォントサイズは何ですか？
ブラウザは既定のルートフォントサイズとして16pxを使うため、このツールもそこから始まります。CSSでhtml要素のfont-sizeを変更している場合（たとえば62.5%にするとルートは10pxになります）は、変換がプロジェクトと一致するようルートフォントサイズの欄を更新してください。
CSSでpxではなくremを使う理由は何ですか？
rem単位はルートフォントサイズに合わせて拡大縮小し、読者がブラウザ設定で選んだサイズを尊重します。フォント、余白、パディングをremで指定すると、その設定に応じてレイアウト全体が拡大縮小するため、固定されたピクセルよりもアクセシビリティの面で優れています。
入力した値を保持したままこのツールを共有できますか？
はい。入力に合わせてURLが自動的に更新されます。アドレスバーからコピーするか共有ボタンを使えば、リンクを開いた人はあなたと同じ入力がそろった状態で見られます。