PERCENTAGE型の単位

％

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

言わずとしれた、割合を表すのが、「％」(パーセンテージ)です。
CSSではLENGTH型やANGLE型の代用で使われることがあります。
長さを表すプロパティ(widthやheight、marginやpaddingなど)では、指定する要素の親要素の値が基準値となります。
角度の場合には円周(360度)を基準に割合を決めていきます。

LENGTH型の単位

px

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

「px」は「pixel」(ピクセル)の略です。
「px」はブラウザ環境に依存しない絶対単位だと誤解されていることが多いですが、実際には相対単位です。

CSSにおけるピクセルは、スクリーンサイズのピクセルとは実際には異なっています。
W3Cによるドキュメントによれば、「px」に関して次のような定義がなされています。

px：ピクセルユニット ── 1pxは0.75ptと同値

これによれば「1px＝0.75pt」となっており、「px」はピクセルの大きさからくる絶対値ではなく、「pt」の大きさを元に測った相対指定の値であることがわかります。
デバイスのピクセル比もデバイスによって変わるので、iPadで見る時とKindleで見る時とGalaxy Tabで見る時で、文字の大きさも違って見えるのです。

そのため、昨今のWeb業界では、フォントサイズに「px」を使わない方がいいと考える人も増えています。

参考：
CSSで知っておきたい、フォントサイズ指定の単位のすべて

ex

「ex」は一般的にそのまま「エックス」と読むか、「エックスハイト」と読みます。

文字の大きさの基準を、小文字のxの高さを基準にしたものなので、「x-height」(xの高さ)という意味の単位になっています。
その時点のコンテナの中にある「x」文字の高さを1exとし、line-heightやmarginといったプロパティで使用されることがあります。

em

「em」はそのまま「エム」と発音されます。

「ex」が「x」の高さを基準にしているのに対し、「em」は定義としては大文字の「M」の幅を基準とした単位とされています。
しかし実際には親要素のフォントサイズを基準とした単位とされています。

例えば、24pxが指定された親要素に対して、子要素に1emを指定すれば24px相当の文字サイズになります。
一方、0.5emを指定すれば12px相当のサイズになります。

ただし、相対指定は親要素の影響を受けてしまう、いわゆる「複利」の計算になってしまうので、入れ子された要素のときには注意が必要です。

rem

「em」は親要素に対しての相対計算を行いますが、「rem」はルート要素(通常はhtml)のフォントサイズを元に計算します。
常にルート要素が基準となるので、非常にわかりやすくスッキリとデザインを行うことができます。

何もルート要素のフォントサイズを指定していない場合は「1rem＝16px」という計算方法になるので、初めのうちはpxを扱っているときのように試行錯誤しながら適切なフォントサイズを探すことになるでしょう。

ch

「ch」はある要素の現在のフォントの数字の「0」の横幅を1chとするもので、等幅フォントと組み合わせるときにまれに使われる単位です。

以前はChromeが未サポートでしたが、最新バージョンでは対応しています。
IEでもサポートはしていますが、実際の「0」の横幅よりも短く表示されてしまうようなので注意が必要です。

cm・mm・q

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

「cm」は1cm(センチメートル)、「mm」は1mm(ミリメートル)、「q」は四分ミリメートルといって1q＝1/4mmとなる単位です。
いずれも絶対単位であり、ディスプレイよりもプリンターなど出力メディアの物理的な特性が分かっている場合に便利です。

in・pt・pc

同じく絶対単位として「in」「pt」「pc」があります。

「in」はインチのことで、1in＝2.5cmで定義することができます。
「pt」はポイントで、1pt＝1/72in＝0.3528mmで定義することができます。
「pc」はパイカで、1pc＝12ptで定義することができます。

mozmm

「mozmm」はMozilla Firefoxによる実験的な単位で、ディスプレイ解像度に関係なくディスプレイ上に正確に1mmを描画しようとする単位です。
Firefoxのほか、Safariも対応しています。

vw・vh

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

「vw」「vh」はそれぞれviewport widthとviewport heightの略で、現在のViewportに対する割合です。
例えば、回り込みを指定した上で、「width: 50vw」「height: 100vh」と指定すれば、高さ100％のコンテナを2つ横並びに並べることができます。

％を使わない理由は、親要素に引きずられることなく、直接Viewportに対する値を指定できるからです。

vmin・vmax

「vmin」「vmax」はそれぞれ「vw」「vh」のうち小さい方の値と大きい方の値を適用することができます。
例えば、「width: 50vmin」としておけば、ブラウザが横長のときにwidthは縦幅に対して50％、ブラウザが縦長のときにはwidthは横幅に対して50％の長さになります。

少々分かりにくいですが、レスポンシブデザインのときに役立つ時が多々あるでしょう。