ANGLE型の単位

deg・rad・grad

compass.jpeg
画像引用元：pexel.com

「deg」はdegree(度)の略で、360degで1円周分と同じです。
「rad」はradian(ラジアン)のことで、「円・扇の弧の長さ÷円の半径」が定義ですが、2πradで1円周分と同じになります。
「grad」はgrade(グラード)もしくはgradian(グラジアン)で、1gradは直角(90度)の100分の1、360deg＝400gradで1周分と同じになります。

turn

「turn」は回転数のことで、1turnが1円周分の回転になります。
「transform: rotate(1turn)」のようなプロパティで使われます。

TIME型の単位

s・ms

time.jpg
画像引用元：pexel.com

「s」・「ms」はそれぞれsecond(秒)・milli second(ミリ秒)のことです。
トランジションやアニメーション、オーディオなどのdurationやdelay、timingなどで使われます。

FREQUENCY型の単位

Hz・kHz

「Hz」「kHz」は、声の高さのような周波数を表す単位で、それぞれヘルツ。キロヘルツを表します。

過去、FIreFoxやOperaがpitchという読み上げ用音声に声の高さを指定するプロパティを用意していましたが、CSS2.1以降削除され、現在では使用されていないようです。

RESOLUTION型

dpi

dpi.jpeg
画像引用元：pexel.com

「dpi」はdot per inch(1インチあたりのドット数)のことです。
画面でよく使われるのは72もしくは96 dpiで、長さは物理的な値ではなく、CSS のinch、cm、またはpxと関連づけられます。

dlcm

「dpcm」はdot per centimeter(1センチメートルあたりのドット数)のことです。
1inch＝2.54cmなので、1dpcmはおよそ0.39dpiとなります。

dppx

「dppx」はdot per pixel(1ピクセルあたりのドット数)を表します。

CSSのinchとCSSのpxの比率は1.96で固定なので、1dppxは 96dpiと同じです。

まとめ

CSSの単位にはさまざまな単位がありますが、それぞれの単位の特性を理解することで便利に使えるプロパティがさまざまあります。

うまく使うことで、例えばレスポンシブデザインのレイアウトを簡単に組み立てることができたり、どのプリンタでも同じように印刷したりすることができます。

適材適所で、これらのプロパティをぜひ使い分けてみてください。