CSSで使うpxとremをすばやく換算。ルートの文字サイズを変えると、換算値とサイズ一覧もすぐに更新されます。
このツールは …回 使われています。
px・remを変換
px
ブラウザーの標準的な基準は16pxです。htmlを62.5%に設定したサイトでは10pxを選びます。
pxCSSのpx値
remCSSのrem値
複数の値を一括換算
数値を1行に1つ入力してください。空行は無視され、最大100件まで換算できます。
0〜999999の数値を入力します。小数も使えます。
よく使うサイズの早見表
数値を押すと、上の換算欄へ反映されます。
| px | rem | 用途の目安 |
|---|---|---|
| 0.5rem | 補助的な余白 | |
| 0.625rem | 小さな注記 | |
| 0.75rem | 注釈・補足 | |
| 0.875rem | 小さめの本文 | |
| 1rem | 標準の本文 | |
| 1.125rem | ゆったりした本文 | |
| 1.25rem | 小見出し | |
| 1.5rem | 見出し | |
| 2rem | 大きな見出し | |
| 3rem | ページタイトル |
remはブラウザーのルート要素(html)の文字サイズを基準にします。ブラウザーの初期設定では通常16pxですが、サイトのCSS設定によって異なります。
使い方と計算方法
- サイトのルート文字サイズを1〜100pxで入力します。初期値は一般的な16pxです。
- px欄またはrem欄に数値を入れると、もう一方が自動で換算されます。
- 各入力欄の下にあるコピーを押すと、単位付きのCSS値をコピーできます。
- 早見表のpx値を押すと、そのサイズのrem値を確認できます。
計算式rem = px ÷ ルート文字サイズpx = rem × ルート文字サイズ
例:ルート文字サイズが16pxの場合、24px ÷ 16 = 1.5remです。ルートを62.5%(通常の初期設定に対して10px)に設定したサイトでは、基準サイズを10pxにすると換算できます。
px・rem変換のよくある質問
pxとremは何が違いますか?
pxは固定のCSSピクセル値です。remはhtml要素の文字サイズを基準にするため、サイトの基準サイズに合わせて拡大・縮小できます。
基準サイズはどれを選べばよいですか?
htmlの文字サイズがブラウザーの標準設定なら16pxを使います。CSSでhtmlを62.5%に設定しているサイトでは、通常10pxを基準にします。設定が分からない場合は、まず16pxのまま換算できます。
一括換算の結果はどう使えますか?
1行に1つ入力し、換算後の値を同じ順序でコピーできます。空行は無視され、100件を超える入力は換算されません。
