CSSで使うpxとremをすばやく換算。ルートの文字サイズを変えると、換算値とサイズ一覧もすぐに更新されます。
このツールは …回 使われています。
px・remを変換
px
pxCSSのpx値
remCSSのrem値
よく使うサイズの早見表
数値を押すと、上の換算欄へ反映されます。
| 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にすると換算できます。
