uga.dev - A Front-end Engineer's shed

../１つ上のページへ戻る

CSS Units Playground

それぞれのCSSの単位が、実際にはどのようなCSSピクセルになるのかを確認できるページです。

画面下部のスライダーを動かして値を変化させてみましょう。

参考：CSS Values and Units Module

サンプルは横スクロールできます。

  • ※「CSS上の値 → px換算」で表示されますが、「px換算」の値は小数点四捨五入です。
  • ※各種viewportの値は1秒ごとに再取得しています。

絶対値

100px → 0px

100pt → 0px

100pc → 0px

100in → 0px

100Q → 0px

100mm → 0px

100cm → 0px

相対値

サンプルの文字サイズ
00
サンプルの行の高さ
00
ルート要素の文字サイズ
00
ルート要素の行の高さ
00

100em → 0px

100ex → 0px

100cap → 0px

100ch → 0px

100ic → 0px

100lh → 0px

100rem → 0px

100rex → 0px

100rcap → 0px

100rch → 0px

100ric → 0px

100rlh → 0px

100% → 0px

Viewport

Viewport
Small Viewport
Large Viewport
Dynamic Viewport

100vw → 0px

100svw → 0px

100lvw → 0px

100dvw → 0px

100vh → 0px

100svh → 0px

100lvh → 0px

100dvh → 0px

100vi → 0px

100svi → 0px

100lvi → 0px

100dvi → 0px

100vb → 0px

100svb → 0px

100lvb → 0px

100dvb → 0px

100vmin → 0px

100svmin → 0px

100lvmin → 0px

100dvmin → 0px

100vmax → 0px

100svmax → 0px

100lvmax → 0px

100dvmax → 0px