1rem は何ピクセルですか。

html 要素の font-size によって決まります。ブラウザの既定は 16px なので通常 1rem は 16px ですが、プロジェクトが html の font-size を変更している場合や、利用者が既定の文字サイズを変えている場合は異なる値になります。

rem と em はどう違いますか。

rem は常にルート文字サイズを基準とし、文書全体で一貫します。em は現在の要素の文字サイズが基準で、入れ子になるほど掛け合わされて値がずれていきます。予測可能なサイズが必要なときは rem を使います。

CSS / FRONTEND · ブラウザ内で処理

REM から PX 変換

rem 値を実際のピクセルに換算し、常用 rem の対照表も表示。

ルート文字サイズの初期値は 16px で、1〜200px を指定でき、2 つの欄はどちらからでも連動します。結果は小数第 4 位で四捨五入します。

入力

ブラウザの既定は 16px です。プロジェクトで html の font-size を変更している場合は実際の値を入力してください。

ルート文字サイズ

REM

ピクセル

結果

ピクセル24px

常用サイズ対照表

ピクセル	REM
`1px`	`0.0625rem`
`2px`	`0.125rem`
`4px`	`0.25rem`
`6px`	`0.375rem`
`8px`	`0.5rem`
`10px`	`0.625rem`
`12px`	`0.75rem`
`14px`	`0.875rem`
`16px`	`1rem`
`18px`	`1.125rem`
`20px`	`1.25rem`
`24px`	`1.5rem`
`28px`	`1.75rem`
`32px`	`2rem`
`36px`	`2.25rem`
`40px`	`2.5rem`
`48px`	`3rem`
`56px`	`3.5rem`
`64px`	`4rem`
`72px`	`4.5rem`
`80px`	`5rem`
`96px`	`6rem`
`128px`	`8rem`

このツールについて

デザインファイルや他者のスタイルシートを読むと `1.375rem` のような値によく出会います。ここに rem を入力すれば実際のピクセル数がすぐ分かり、2 つの欄は連動しているので逆方向の確認もできます。計算しやすいようルート文字サイズを 10px にしている場合は、その値に変更すれば対照表も再計算されます。

操作手順

プロジェクトで実際に使っているルート文字サイズを設定します。
rem 値を入力してピクセルの結果を得ます。
対照表で常用 rem 値のピクセルサイズを一覧できます。

プライバシー

計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。

よくある質問

1rem は何ピクセルですか。: html 要素の font-size によって決まります。ブラウザの既定は 16px なので通常 1rem は 16px ですが、プロジェクトが html の font-size を変更している場合や、利用者が既定の文字サイズを変えている場合は異なる値になります。
rem と em はどう違いますか。: rem は常にルート文字サイズを基準とし、文書全体で一貫します。em は現在の要素の文字サイズが基準で、入れ子になるほど掛け合わされて値がずれていきます。予測可能なサイズが必要なときは rem を使います。

← すべての CSS／Frontend ツール