CSS 単位変換 — px、rem、em、pt を相互変換
px、rem、em、pt、% の間で CSS の長さ単位を変換します。ルートフォントサイズをカスタマイズでき、すべてブラウザ内で動作。アップロードなし、制限なし。
CSS Unit Converter
Convert CSS units between px, rem, em, and pt. Uses the standard 16px = 1rem base. Works entirely in your browser.
CSS の単位はわずかな名前の集合にすぎず、相反する多くの意味が割り当てられています。仕様ではおよそ 30 種類の長さ単位が定義されていますが、実際の Web 開発で使うのはそのうちの数種類だけです。px は絶対サイズ、rem と em はタイポグラフィ、% は柔軟なレイアウト、vw / vh はビューポート相対のサイズ指定に使われます。本ツールが扱うのは最初の 3 種類で、それらの変換はルートフォントサイズという 1 つの定数を掛けるだけの演算です。本質的に value * 16 でしかない計算にツールが存在する理由は、ルートフォントサイズが設定変更可能であり、この定数を間違えると、コードレビューでは正しく見えてもユーザー環境では壊れる値が生成されてしまうからです。
単位変換について一見分かりにくいのは、CSS の px がハードウェアディスプレイの px とは別物だという点です。CSS は 1px を常に 1/96 インチと定義しています。つまり、96 CSS ピクセルはデバイスの物理ピクセル密度に関係なく正確に 1 インチです。Retina ディスプレイでは、ブラウザは 1 CSS ピクセルを 4 ハードウェアピクセル（2×2）にマッピングして鮮明に描画します。4K ディスプレイでは 1 CSS ピクセルに対し 9 ハードウェアピクセル（3×3）のマッピングになります。単位変換ツールは完全に CSS ピクセル空間で動作するため、出力される値はどんなデバイスでもコード上は正しく、変わるのは描画サイズであって値そのものではありません。印刷用スタイルシートにも同じ 96 CSS ピクセル = 1 インチの規則が適用されるため、1in = 96px、1pt = 1.333px（印刷ポイントの定義）となります。
最後にまとめると、新しいスタイルシートで適切な単位を選びたい場合、rem はタイポグラフィとスペーシングに（ユーザーの設定に合わせてスケールするように）、px はボーダーやシャドウに（拡大縮小されないように）、% や vw はレイアウトに（ビューポートに合わせて適応するように）使ってください。レガシーなスタイルシートを px から rem に書き換えたい場合、設定すべき唯一の数値はルートフォントサイズです。通常はブラウザのデフォルトを変更していなければ 16px、なければデザインシステムで標準化されている値になります。本ツールは、任意のルートサイズに対し、任意の px 入力に対応する正確な rem 値を出力します。
使い方
値と変換元の単位を入力
数値を入力し、変換元の単位（px、rem、em、pt、%）を選択します。ルートフォントサイズのフィールドは編集可能で、デフォルトの 16px はブラウザのデフォルトと一致しています。多くの計算ツールは明示されない限り 16px を仮定します。
変換結果を確認する
出力パネルに、他のすべてのサポート単位での値が表示されます。入力中ずっとリアルタイムに再計算されるので、1 つの入力から 5 つの出力が同時に得られます。
必要な行をコピーする
出力パネルの任意の行をクリックすれば、その行がそのまま貼り付け可能な CSS 宣言としてクリップボードにコピーされます（`font-size: 1.25rem;`）。スタイルシートを手作業で編集するときに便利です。
よくある質問
px の値がブラウザの表示と違っているのはなぜですか?
ブラウザは 16px のルートフォントサイズがデフォルトですが、ユーザーが変更できます（ブラウザのズーム、OS の表示設定、アクセシビリティの好みなど）。この変換ツールはルートフォントサイズを設定変更できるので、正確な結果を得るには、デフォルトの 16px ではなく、実際のルートフォントサイズに合わせてください。
rem と em の違いは何ですか?
rem はルートフォントサイズを基準にします（`html { font-size: 16px; }` の場合、1rem = 16px）。em は親要素のフォントサイズを基準にするため、入れ子の階層ごとに値が変わる可能性があります。`font-size: 20px` の親要素内では 1em = 20px であり、16px ではありません。
絶対単位と相対単位の間でも変換できますか?
はい。px、pt、in（インチ）は絶対単位で、rem、em、% は相対単位です。絶対 → 絶対の変換は正確で（CSS 仕様により 1in = 96px = 72pt）、相対 → 絶対の変換にはルートフォントサイズが必要です（1rem = ルートフォントサイズの px 値）。
% の値が近似になるのはなぜですか?
50% の意味はプロパティによって変わります。`width` なら親の幅の半分、`font-size` なら親のフォントサイズの半分、`margin` なら包含ブロックの幅の半分です。別プロパティを選ばない限り、このツールは font-size の % を仮定して計算します。
モダンな CSS では px と rem どちらを使うべきですか?
rem はタイポグラフィとスペーシングのモダンな推奨単位で、ユーザーのフォントサイズ設定を尊重できます。px はボーダーやシャドウなど、テキスト以外のサイズに適しています。どちらを使うかはプロジェクトの規約であり、正確性の問題ではありません。
制限事項
- em は親要素に依存しますem は親要素のフォントサイズを基準にするため、入れ子の階層ごとに値が変わる可能性があります。このツールは単一のルートフォントサイズを仮定しているため、入れ子になった em 値を扱う場合は、DOM を上りながら各階層で変換を適用してください。
- vw と vh は変換対象外ですビューポート単位（vw、vh、vmin、vmax）はビューポートサイズを基準にするため、ルートフォントサイズでは変換できません。このツールでは扱えないので、ビューポート相対のレイアウトには別の計算ツールを使ってください。
- % はプロパティごとに区別されません% の変換は、値が font-size に適用されることを仮定しています。width、padding、margin の % では結果が異なるため、ツールは % の行にその仮定を明記し、適用範囲が明確になるようにしてあります。
プラットフォーム別の注意点
- macOS
- macOS の Safari、Chrome、Firefox はすべてルートフォントサイズがデフォルトで 16px になっており、このツールもそれに揃えています。ズーム後の表示をテストしたい場合は、入力欄のルートフォントサイズを実際のズーム倍率に合わせて再実行してください。
- Windows
- Windows の Edge と Chrome のデフォルトは 16px です。Internet Explorer 11 は一部プロパティで異なるデフォルトを使っていました。レガシーコードを保守している場合は、IE11 のレンダリングモードでテストし、ルートフォントサイズを実際の値に合わせてください。
- Linux
- Linux のブラウザもデフォルトは macOS や Windows と同じ 16px です。高 DPI ディスプレイでは実際の描画ピクセルはハードウェアでスケーリングされますが、CSS の px 値は変わりません。このツールはレンダリング後のピクセルではなく CSS の値を扱います。
- Web
- 完全にクライアントサイドで動作し、ページの読み込み後はオフラインでも使えます。ルートフォントサイズはブラウザからではなく入力欄から読み取るため、正確な変換結果を得るには、スタイルシートの実際の値を入力してください。