PX⇔Rem変換
PXとRemを双方向に変換。ベースフォントサイズ指定、早見表、一括変換に対応。
PXREM
変換
px
1rem
px
早見表（ベース: 16px）
| PX | REM | コピー |
|---|---|---|
| 8px | 0.5rem | |
| 10px | 0.625rem | |
| 12px | 0.75rem | |
| 14px | 0.875rem | |
| 16px | 1rem | |
| 18px | 1.125rem | |
| 20px | 1.25rem | |
| 24px | 1.5rem | |
| 28px | 1.75rem | |
| 32px | 2rem | |
| 36px | 2.25rem | |
| 40px | 2.5rem | |
| 48px | 3rem | |
| 56px | 3.5rem | |
| 64px | 4rem | |
| 72px | 4.5rem | |
| 80px | 5rem | |
| 96px | 6rem |
一括変換
複数の値をスペース、カンマ、改行で区切って入力すると一括変換できます。
PX⇔Rem変換ツールの使い方
上部の方向切り替えボタンでPX→RemまたはRem→PXの変換方向を選択し、数値を入力すると瞬時に変換結果が表示されます。ベースフォントサイズはスライダーまたは数値入力で変更でき、デフォルトは16px（ブラウザ標準）です。
一括変換では、複数の値をスペース・カンマ・改行で区切って入力すると、まとめて変換できます。変換結果はCSS出力としてコピーでき、スタイルシートに直接貼り付けられます。
PXとRemの違い
PX（ピクセル）は絶対単位で、画面上の固定サイズを指定します。Remは相対単位で、ルート要素（html）のフォントサイズを基準にした倍率です。ブラウザの標準フォントサイズは16pxなので、1rem = 16pxとなります。
Remを使用することで、ユーザーがブラウザのフォントサイズ設定を変更した場合にも適切にスケーリングされます。アクセシビリティとレスポンシブデザインの観点から、テキストサイズや余白にはRemの使用が推奨されています。
主な機能
- 双方向変換 --- PX→Rem / Rem→PXをワンクリックで切り替え
- ベースフォントサイズ --- 10〜24pxの範囲で自由に設定
- 早見表 --- よく使うPX値のRem換算を一覧表示
- 一括変換 --- 複数値をまとめて変換
- CSS出力 --- 変換結果をCSS形式でコピー
- ワンクリックコピー --- 各値をクリップボードにコピー
関連記事
よくある質問
- Q. ベースフォントサイズの標準は何pxですか？
- ブラウザのデフォルトフォントサイズは16pxです。CSSでhtml要素のfont-sizeを変更していなければ、1rem = 16pxとなります。Tailwind CSSのデフォルトも16pxベースで設計されています。
- Q. PXとRemのどちらを使うべきですか？
- テキストサイズや余白にはRemの使用が推奨されます。ユーザーがブラウザのフォントサイズ設定を変更した場合にも適切にスケーリングされ、アクセシビリティが向上します。ボーダーやbox-shadowなどの細い線にはPXを使うことが多いです。
- Q. 62.5%テクニックとは何ですか？
- html { font-size: 62.5%; } とすると、1rem = 10pxとなり、PX→Rem変換が暗算しやすくなるテクニックです。例えば16px = 1.6rem、24px = 2.4remと計算が簡単になります。このツールではベースフォントサイズを10pxに設定することで同じ計算ができます。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。