Px to Em/Rem Converter

ピクセル値と相対単位をリアルタイム変換します

Base Size (基準値) px

Pixel (px)

EM / REM

Preview Text

The quick brown fox jumps over the lazy dog.

日本語プレビュー：あのイーハトーヴォのすきとおった風

PX, EM, REMの違いとは？

CSSでフォントサイズや余白を指定する際、単位の使い分けは重要です。

絶対単位です。スクリーン上の物理的な画素数に基づきます。デザインの正確な再現性は高いですが、ユーザーのブラウザ設定（文字サイズ変更）を無視する場合があり、アクセシビリティの観点からは注意が必要です。

相対単位です。親要素のフォントサイズに対する倍率です。入れ子構造（ネスト）になると計算が複雑になることがあります（「コンパウンド効果」）。

div { font-size: 1.2em; } /* 親が16pxなら19.2px */

相対単位ですが、常にルート要素（通常はhtmlタグ）のフォントサイズを基準にします。計算が予測しやすく、レスポンシブデザインで現在最も推奨される単位の一つです。多くのブラウザのデフォルトは16pxです。

                html { font-size: 16px; }

                h1 { font-size: 2rem; } /* 常に32px */