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

Code

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

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

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

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

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

絶対的な長さの単位の一覧表

単位読み方換算px換算*
cmセンチメートル1cm = 1/2.54 in37.79
mmミリメートル1mm = 1/10 cm3.78
Qキュー1Q = 1/4 mm0.94
inインチ1in = 2.54cm96
pcパイカ1pc = 1/16 in6
ptポイント1pt = 1/72 in1.33
pxピクセル1px = 1/96 in

*小数第3位四捨五入

CSS単位の換算ツール

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

基本的にはpxしか使わない

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

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

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

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

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

印刷用CSSで活躍する単位

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

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

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

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

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

相対的な長さの単位%・emなどを使うべき

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

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

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

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

コメント

タイトルとURLをコピーしました