DevToolPal
日本語

CSS 単位

pxからremへの換算ツール

ピクセル(px)をrem(rem)に換算します。1 px = 0.0625 rem、1 rem = 16 px です。

計算式

rem = px ÷ 16

換算方法

ピクセルをremに換算するには、値を 16 で割ります。例:32 px = 2 rem。

換算表

px rem
1 px 0.0625 rem
2 px 0.125 rem
4 px 0.25 rem
8 px 0.5 rem
10 px 0.625 rem
12 px 0.75 rem
14 px 0.875 rem
16 px 1 rem
18 px 1.125 rem
20 px 1.25 rem
24 px 1.5 rem
32 px 2 rem
48 px 3 rem
64 px 4 rem

換算表は基準フォントサイズ 16pxを前提にしています。上の換算ツールで設定をプロジェクトに合わせて変更できます。

これらの単位について

ブラウザーはすべての CSS の長さを最終的にピクセルに変換します。rem はルートのフォントサイズ、em は親要素のフォントサイズが基準で、ページやユーザーが変更しない限り主要ブラウザーではどちらも 16px です。1pt は 1/72 インチ、1px は 1/96 インチなので 1pt = 1.333px です。vw はビューポート幅の 1% で、ピクセル数は画面幅によって変わります。

よくある質問

› px を rem に換算するには?

1 px = 0.0625 rem です。換算するには値を 16 で割ります:32 px = 2 rem。

› 1 rem は何 px ですか?

1 rem = 16 px です。逆方向の計算式は px = rem × 16 です。

› px ではなく rem を使う理由は?

rem はユーザーがブラウザーで設定した文字サイズに追従するのでアクセシビリティに優れ、ルートの値を 1 つ変えるだけでレイアウト全体を一貫して拡大縮小できます。

› rem と em の違いは?

rem は常にルート(html)のフォントサイズを使います。em は親要素のフォントサイズを使うため、入れ子にすると値が掛け合わされます。