〔 Web制作 〕

px・rem変換ツール

pxとremを相互変換し、指定した基準font-sizeで早見表も更新します。

Unit Converter

pxとremを相互変換

どちらか一方を入力すると、もう一方を自動で計算します。

px
rem

通常はブラウザ標準の16pxです

px

早見表

基準 16px
8px = 0.5rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
32px = 2rem
40px = 2.5rem
48px = 3rem
64px = 4rem

〔 このツールでできること 〕

実務の小さな確認を、すばやく。

CSS実装中に、デザインカンプのpx値をremへ置き換えたいときの計算を簡単にします。片方の値を編集するだけでもう片方が更新され、プロジェクト固有の基準font-sizeにも対応できます。

使い方

  1. 01

    pxまたはremの値を入力します。

  2. 02

    必要なら基準font-sizeを変更します。

  3. 03

    自動更新された変換値と早見表を確認します。

具体例

基準: 16px
24px ÷ 16 = 1.5rem
1.25rem × 16 = 20px

よくある利用シーン

  • • Figmaのpx指定をremへ置き換えるとき
  • • root font-sizeが異なる案件の値を確認するとき
  • • CSSレビューで単位換算を素早く確認するとき