PixelからREM/EMへの変換ツール
CSS用にpxをremやemに変換します。ルートおよび親フォントサイズを調整可能です — remとemは同じものに依存しないためです。
REMは常にルート(<html>)要素のフォントサイズを基準にします。EMは現在の要素自身のフォントサイズを基準にするため、使用される場所によって異なる場合があります。上の親要素のサイズを調整して、EMの結果がREMとは独立してどのように変化するか確認してください。
即時&リアルタイム
入力するたびにすべての単位がリアルタイムで更新されます。「変換」ボタンや待ち時間は不要です。
REMとEMを別々に管理
ルートと親要素のフォントサイズを別々に入力できます。両者は同じものではないためです。
設計段階からプライバシーに配慮
すべてお使いのブラウザ内で処理されます。アップロードやログ記録は一切行われません。
オンラインでPXをREMとEMに変換
デフォルトの16pxルートフォントサイズでは、16pxは1remに相当します。CurePDFの変換ツールは、ピクセル値からrem・emを計算します(または逆方向にも変換できます)。指定したルートおよび親要素のフォントサイズを使用します — すべてのサイトがブラウザのデフォルト値を使っているとは限らないためです。
PXからREMへの変換の仕組み
計算例(16pxルートの場合):16px / 16 = 1rem。20px / 16 = 1.25rem。24px / 16 = 1.5rem。
REMとEM:同じものではありません
REMは常にルート<html>要素のフォントサイズを基準にします — ページ全体でただ一つの値です。一方EMは現在の要素自身のフォントサイズを基準にするため、ネストされたコンテンツの各階層で異なる場合があります。つまり、同じピクセル値でも使用場所によって異なるEM値に変換される一方、REM値は常に同じ値に変換されます。
なぜ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に合わせて変更することもできます。