CSSで単位の種類

単　位	説　明
px	「px」は”pixel(ピクセル)”の略。「px」はブラウザ環境に依存しない絶対単位だと誤解されていることが多いが、実際には相対単位。CSSにおけるピクセルは、スクリーンサイズのピクセルとは実際には異なる。 W3Cによるドキュメントによれば、「px」に関して次のような定義がある。【　px：ピクセルユニット ── 1pxは0.75ptと同値　】これによれば「1px＝0.75pt」となっており、「px」はピクセルの大きさからくる絶対値ではなく、「pt」の大きさを元に測った相対指定の値であることがわかる。デバイスのピクセル比もデバイスによって変わるため、iPadで見る時とKindleで見る時とGalaxy Tabで見る時では文字の大きさが違って見える。そのため、昨今のWeb業界では、フォントサイズに「px」を使わない方がいいと考える人も増えている。
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」という計算方法になる。
ch	「ch」はある要素の現在のフォントの数字の「0」の横幅を1chとするもので、等幅フォントと組み合わせるときにまれに使われる単位。
cm / mm / q	「cm」は1cm(センチメートル)、「mm」は1mm(ミリメートル)、「q」は四分ミリメートルといって1q＝1/4mmとなる単位。いずれも絶対単位であり、ディスプレイよりはプリンターなど出力メディアの物理的な特性が分かっている場合に便利。
in / pt / pc	「cm」「mm」「q」と同じ絶対単位として「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	「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％の長さになる。少々分かりにくいが、レスポンシブデザインのときに役立つ時が多々ある。
deg / rad / grad	「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)」のようなプロパティで使われる。
s / ms	「s」・「ms」はそれぞれsecond(秒)・milli second(ミリ秒)のこと。トランジションやアニメーション、オーディオなどのdurationやdelay、timingなどで使われる。
dpi	「dpi」はdot per inch(1インチあたりのドット数)のこと。画面でよく使われるのは72もしくは96 dpiで、長さは物理的な値ではなく、CSS のinch、cm、またはpxと関連づけられる。
dpcm	「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と同じ。