「この単位、なんだ？初めて見た・・・」

CSSが初めに登場してからかなりの時間が経過していますが、CSSに触れている経験が長いひとでも、一度はこのように思ったことがあるのではないでしょうか。
CSS歴10年以上の方でも*「長さの指定にはpxしか使わない」*という人も珍しくはありません。

実際、CSSは小さな仕様変更を繰り返しており、W3Cの草案作成・勧告といった正式なプロセスを経て便利な単位やプロパティは続々と追加されています。

CSSにおいて、単位を操ることができれば、デザインやレイアウトを行う上でかなり幅が広がることになります。

これから紹介するように、CSSにはすでにさまざまな単位がありますが、知らなかったがために回り道をしてしまっていた、あるいは知っていたらもっと短く書けるコードも多く存在します。

今回は、あまり知られていないけれど知ると得するCSSの単位をまとめていきます。
単位についてわからないことがあれば、一旦この記事に戻ってみてください。

CSSの単位のカテゴリ分け

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

一口に「CSSの単位」と言っても、あらゆる場所で使えるものもあれば、一部のCSS関数内で使えるものなど、使える場所が限定されている場合もあります。

CSSの単位をカテゴリ分けすると、以下のようになります。

1. PERCENTAGE型

PERCENTAGE型は、割合を示す値に使われます。
正確に言えば単位ではないのですが、何らかの値を基準として、その割合を示します。

PERCENTAGE型は、その名前の通り*「％」*が用意されています。

2. LENGTH型

LENGTH型は、長さを表す単位に使われます。
オブジェクトの高さやマージンの幅など、あらゆるシーンで使う単位です。

LENGTH型には、ブラウザの設定や環境に依存する相対単位と、ブラウザ環境に依存しない絶対単位があります。
前者には*「px」「ex」「em」「rem」*があり、後者には　*「ch」「cm」「mm」「q」「in」「pt」「pc」「mozmm」「vw」「vh」「vmin」「vmax」*があります。

3. ANGLE型

ANGLE型は、角度を表す単位に使われます。

この型に当てはまるのは、*「deg」「grad」「rad」「turn」*があります。

4. TIME型

TIME型は、時間を表す単位に使われます。
アニメーションやトランジションなどで使う場面が多いでしょう。

*「s」「ms」*がこの型に当てはまります。

5. FREQUENCY型

FREQUENCY型は、周波数を表す単位に使われます。

この型に当てはまるのは、*「Hz」「kHz」*があります。

6. RESOLUTION型

RESOLUTION型は、デバイスの解像度を表す単位に使われます。
主にMedia Queryの式で利用します。

この型に当てはまる単位は、*「dpi」「dpcm」「dppx」*です。

それでは、以下でそれぞれの単位の詳細を確認していきましょう。