【CSS】長さの単位はpxだけじゃない｜単位の一覧表と換算ツール

CSSでサイズ指定といえばpx単位ですが、実は他にも色々な単位が使えます。

いや、emとか%とかもそうなのですが、今回は相対的な長さを指す単位は置いておいて、絶対的な長さを指す単位について解説したいと思います。

cmやmmもCSSで使えるし、pxと換算できる

px以外はさほど使わないかもしれませんが、メートル法ではcm・mm・Q、インチ法ではin・pc・ptといった単位が使えます。

そして、下の表でも分かるとおり、それぞれpxと換算できます。

単位	読み方	換算	px換算*
cm	センチメートル	1cm = 1/2.54 in	37.79
mm	ミリメートル	1mm = 1/10 cm	3.78
Q	キュー	1Q = 1/4 mm	0.94
in	インチ	1in = 2.54cm	96
pc	パイカ	1pc = 1/16 in	6
pt	ポイント	1pt = 1/72 in	1.33
px	ピクセル	1px = 1/96 in	–

*小数第3位四捨五入

See the Pen Size-select by Takayuki Kojima (@takayuki-kojima) on CodePen.

ピクセルといえば画素の単位なので、単純に実寸サイズと換算できないのでは？上記の場合『解像度96ppiの場合』と注記を入れるべきでは？

と思いきや、CSSでは 1px = 0.75pt（1in = 96px）と決められていて、解像度によってその計算が変わることはありません。

仮にcmの単位を使ってスタイリングした場合、どのブラウザ、どのデバイスでも 1cm = 37.79px に換算されて表示されるというわけです。

つまり、どの単位を使っても、実質的にはpxを使っているのと変わりありません。

じゃあcmとかinは何のためにあるの？となりますね。

webページの出力先はディスプレイだけではありません。

たとえば紙に印刷する場合。印刷するときは1cmは1センチ、1inは1インチで出力されます。

前述の通り、pxからcmやinへの換算は解像度（dpi）によらないので、印刷用のサイズ指定をpx単位で決めることもできなくはないです。

が、印刷用スタイルシートを別に組むのであれば、cmやmm、ptなどの見慣れた単位を使ったほうがはるかに分かりやすいでしょう。

px以外の単位の使いどころは、そんなところでしょうか。

文字のサイズや余白などを全部pxで決めていくと、各要素のサイズが固定されるため、画面サイズが変わった時に見づらくなったりバランスが悪くなったりすることがあります。

対策としてブレークポイントごとに数値を設定するわけですが、それにも限界があります。

%やem、remといった相対的な長さの単位を使って柔軟なサイズ指定をして、どのデバイスを使うユーザーにも見やすいスタイルを心掛けると良いでしょう。

詳しくはこちらの記事で説明しています。