px⇔rem⇔em変換ツール

px⇔rem⇔em変換ツールの使い方

px⇔rem⇔em変換ツールは、CSSの単位を相互変換できる無料ツールです。会員登録は不要で、入力内容はブラウザの外に送信されません。

1. 基準フォントサイズを入力します（多くのブラウザの初期値は16px）。
2. 変換したい値と単位（px・rem・em）を入力します。
3. 3つの単位すべてが自動で表示されます。
4. 各行のコピーボタンで値をコピーして使います。

px・rem・emの違いについて

pxは絶対的なピクセル数です。remは「ルート要素（html）のフォントサイズ」を基準にした相対単位で、ページ全体でどこに書いても同じ基準を参照します。emは「その要素自身（または親要素）のフォントサイズ」を基準にするため、ネスト（入れ子）した要素では計算が複雑になることがあります。

• このツールの計算式は「rem・em＝px÷基準フォントサイズ」「px＝rem・em×基準フォントサイズ」です。emはルート要素直下（親のフォントサイズが基準フォントサイズと同じ）と仮定した簡易換算です。
• ユーザーがブラウザの文字サイズ設定を変更した場合、remで指定した要素はその設定に応じて連動して拡大・縮小されます（アクセシビリティの観点で推奨される理由の1つです）。
• 近年はメディアクエリの単位もremで統一する設計が主流です。pxで書かれた既存のCSSをrem化する際にこのツールが使えます。

よくあるつまずきポイント

• emは親要素のフォントサイズに依存するため、ネストした要素で意図しない拡大が連鎖することがあります（1.2emの要素の中に1.2emの要素を置くと1.44倍になる、など）。迷ったらremを使うのが安全です。
• CSSのfont-size以外のプロパティ（paddingやmarginなど）にemを使うと、その要素自身のフォントサイズが変わったときに一緒に変化する点に注意してください。
• 基準フォントサイズをCSSのhtml { font-size: 62.5%; }のようなテクニックで10pxに変更しているサイトもあります。その場合は基準フォントサイズの欄を実際の値に合わせて計算してください。