Skip to main content

ホーム  /  単位変換ツール  /  PXからREM/EMへの変換ツール

PixelからREM/EMへの変換ツール

CSS用にpxをremやemに変換します。ルートおよび親フォントサイズを調整可能です — remとemは同じものに依存しないためです。

⚡ 即座に結果表示 🎯 ルートサイズを調整可能 🆓 完全無料、登録不要

REMは常にルート(<html>)要素のフォントサイズを基準にします。EMは現在の要素自身のフォントサイズを基準にするため、使用される場所によって異なる場合があります。上の親要素のサイズを調整して、EMの結果がREMとは独立してどのように変化するか確認してください。

すべての単位に変換:
ピクセル (px)
0
REM (rem)
0
EM (em)
0
📌 クイックリファレンス — デフォルトの16pxルートの場合
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
32px2rem
40px2.5rem

即時&リアルタイム

入力するたびにすべての単位がリアルタイムで更新されます。「変換」ボタンや待ち時間は不要です。

REMとEMを別々に管理

ルートと親要素のフォントサイズを別々に入力できます。両者は同じものではないためです。

設計段階からプライバシーに配慮

すべてお使いのブラウザ内で処理されます。アップロードやログ記録は一切行われません。

オンラインでPXをREMとEMに変換

デフォルトの16pxルートフォントサイズでは、16pxは1remに相当します。CurePDFの変換ツールは、ピクセル値からrem・emを計算します(または逆方向にも変換できます)。指定したルートおよび親要素のフォントサイズを使用します — すべてのサイトがブラウザのデフォルト値を使っているとは限らないためです。

PXからREMへの変換の仕組み

rem = px / root font size

計算例(16pxルートの場合):16px / 16 = 1rem。20px / 16 = 1.25rem。24px / 16 = 1.5rem。

REMとEM:同じものではありません

REMは常にルート<html>要素のフォントサイズを基準にします — ページ全体でただ一つの値です。一方EMは現在の要素自身のフォントサイズを基準にするため、ネストされたコンテンツの各階層で異なる場合があります。つまり、同じピクセル値でも使用場所によって異なるEM値に変換される一方、REM値は常に同じ値に変換されます。

em = px / current element's font size  ·  rem = px / root element's font size (constant across the page)

なぜCSSでピクセルの代わりにREMを使うのか?

ユーザーがアクセシビリティ設定でブラウザの基本フォントサイズを変更すると、REM値は自動的にスケールしますが、固定ピクセル値はスケールしません。そのため、テキストサイズの指定にはremの方がよりアクセシブルなデフォルトとなり、emはサイズが本当に親要素に合わせてスケールすべき場合(ボタンのフォントサイズに合わせて大きくなるべきパディングなど)に使われます。

よくある質問

16pxはremでいくつですか?

デフォルトのルートフォントサイズ16pxの場合、16pxは1remに相当します。公式は rem = px / ルートフォントサイズ です。

REMとEMは同じものですか?

いいえ。REMは常にルート(html)要素のフォントサイズを基準にします。EMは現在の要素自体のフォントサイズを基準とし、ネストされたコンテンツの各レベルで異なる可能性があります — そのため、同じピクセル値でも使用場所によって異なるEM値に変換されることがあります。

CSSでピクセルではなくREMを使う理由は何ですか?

ユーザーがブラウザの基本フォントサイズを(アクセシビリティのために)変更すると、REM値は自動的にスケーリングされますが、固定されたピクセル値はスケーリングされません — そのため、テキストサイズの指定にはREMの方がよりアクセシブルな単位となります。

デフォルトのルートフォントサイズはいくつですか?

すべての主要ブラウザのデフォルト設定では16pxです。この変換ツールはデフォルトで16pxを使用しますが、サイトの実際のCSSに合わせて変更することもできます。

関連する変換ツール