px↔rem変換ツール
CSSの一括変換とリアルタイム計算。
ベースフォントサイズの変更・62.5%設定にも対応。
px
リアルタイム変換
px
= rem
CSS一括変換（px → rem）
CSSを貼り付けると px の値を自動で rem に変換します。行に /* keep-px */ があるとその行は変換しません。
換算早見表 （base: 16px）
| px | rem |
|---|
便利だと思ったらシェアをお願いします！
remとは？pxとの違い
px（ピクセル）
絶対単位。画面上の実際のピクセル数を指定します。ブラウザのフォントサイズ設定に影響されず、常に同じサイズで表示されます。
rem（レム）
相対単位。ルート要素（html）のフォントサイズを基準に計算されます。ブラウザのフォントサイズ設定を尊重するため、アクセシビリティ的にremの使用が推奨されています。
62.5%テクニックとは？
多くのブラウザのデフォルトフォントサイズは16pxです。html { font-size: 62.5%; } と指定すると、ベースが 16px × 62.5% = 10px になり、1rem = 10px として計算できるようになります。
html { font-size: 62.5%; } /* 16px × 62.5% = 10px */
body { font-size: 1.6rem; } /* = 16px */
h1 { font-size: 2.4rem; } /* = 24px */これにより暗算が容易になり、デザインカンプのpx値をremに変換する際の計算ミスを減らせます。
よくある質問
ベースフォントサイズはどこで確認できますか？
CSSの html { font-size: ○○px; } を確認してください。未指定の場合はブラウザデフォルトの16pxです。
line-heightなど単位なしの値も変換されますか？
px が付いている値のみ変換します。単位なしの数値やem、%などは変換対象外です。
Tailwindのremはベースが何pxですか？
Tailwind CSSはデフォルトで1rem = 16pxです。ベースフォントサイズを16pxのまま使えばTailwindと同じ換算になります。
emとremの違いは？
emは親要素のフォントサイズを基準に計算されるため、ネストが深くなると予期しないサイズになることがあります。remはルート要素（html）を基準にするため、どこで使っても一貫したサイズになります。