px, %, em, rem, vw, vhなど、CSSの異なる単位が互いにどのように変換されているかが分かる便利ツール

Post on:2018年3月7日

sponsors

絶対単位のpxをはじめ、%, em, remなどの相対単位、vw, vhなどのビューポートの幅と高さに基づいた単位などが、お互いにどのように変換されているかが分かる便利ツールを紹介します。

ツールの使い方は簡単です。
ビューポートの幅と高さを定め、あとは単位のスライダーを移動するだけです。

bodyサイズ: 1200px x 768pxを基準にした単位の値

pxを16pxから300pxに変更してみました。

bodyサイズ: 1200px x 768pxを基準にした単位の値

また、ビューポートのサイズを変更すると、vwやvhなどの値が変化します。

制作する際にも、確認する際にも、便利なツールです。