PX・REM変換

PX・REM変換とは#

PX・REM変換はpxとremを相互に換算するツールです。どちらの欄も編集でき、片方に入力するともう片方が更新されます。そのままCSSにコピーできます。

remは基準フォントサイズを1とした長さです。基準が16pxなら1remは16pxです。

使い方#

1. px欄とrem欄のどちらかに数値を入力します。
2. 使う方の値をコピーします。

設定#

• 基準フォントサイズ: 変換の基準にする値です。12・14・16・18から選び、html要素のfont-sizeと合わせます。特に指定がなければ16が基準です。

よく使う値#

対応表には、よく使うpx値と現在の基準でのrem換算値が並びます。行を選ぶと、そのpx値がpx欄に入りrem欄が更新されます。

活用シーン#

• デザインカンプのpx指定をremに直し、伸縮するレイアウトに組み込むとき。
• 既存CSSのrem指定をpxに戻して大きさの感覚をつかみたいとき。
• 余白や文字サイズを1つの基準に揃えてからCSSを書きたいとき。

注意点#

• もう一方の欄は小数最大4桁に丸められます。基準16pxでpxに12と入れるとrem欄は0.75になります。
• remは基準フォントサイズで変わるので、コピーする前にCSSの基準と合っているか確かめます。

よくある質問#