CSS unit conversion using a NPM packageは、pxや%、emなどのCSSでの異なる単位の対応値を確認することができるWEBサービスです。

各単位の対応表が掲載されているサイトはありますが、CSS unit conversion using a NPM packageでは動的に値を変化させながら確認することができます。

CSS unit conversion using a NPM packageの使い方

CSS unit conversion using a NPM packageにアクセスして、各種単位のバーをドラッグして値を変化させるだけです。それぞれに対応した値が表示されます。

基準となる横幅と高さは、ブラウザのウインドウサイズになりますので、横幅と高さを変更したい場合はウインドウサイズを調整します。

あとがき

サクッと単位毎の値を確認したい時に便利だし、vhやvwにも対応しているのはありがたいです。

値が%やemで指定されていると、親要素の値によって変動することもあってわかりにくいですよね。計算するのが面倒な時はぜひご活用ください。