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

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

サイトのキャプチャ

CSS unit conversion

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

サイトのキャプチャ

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

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

サイトのキャプチャ

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

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

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

サイトのキャプチャ

CSS unit conversion

sponsors

top of page

©2018 coliss