CSSにおける長さ・大きさ・角度・時間の単位について【CSS】

フォントの大きさやボーダーの太さ、色のグラデーションの角度、時間など、CSSのプロパティで単位付きで数値を指定することがけっこうあります。

でもその指定方法や単位の種類は1つじゃありません。

フォントサイズを指定するにも色々方法がありますし、他のことに対して指定する場合もそうです。

この記事では、長さ・大きさ・角度・時間の単位について紹介したいと思います。

長さや大きさの単位系

まず、長さや大きさの単位系についてなんですが、絶対単位と相対単位という2種類があります。

指定した値で大きさが決まる絶対単位

絶対単位は、指定した値で大きさが決まる単位のことをいいます。

たとえば見出しのh2タグは20pxだと指定したとき、どういったデバイス環境でも20pxになるのですが、これだとスマホで見たときに大きすぎたりもするので、レスポンシブ対応などを考えると少しデメリットでもあります。

絶対単位で指定できる単位を紹介します。

px

よく使うのが1ピクセルに対応した単位であるpx（ピクセル）ですね。

ただし、ユーザーが扱うディスプレイの解像度によっては、指定した値で表示されるサイズは変化したりもするので、後述する相対単位ともいえるかもしれません。

CSSの仕様では絶対単位に分類されているので、この記事でも一応絶対単位として扱いたいと思います。

cm

cmは1センチメートルに対応した単位です。

mm

mmは1ミリメートルに対応した単位です。

in

inは1インチに対応した単位です。

1インチというのはおよそ2.54cm。

pt

ptは1ポイントに対応した単位です。

1ポイントというのはおよそ1インチの1/72です。少しイメージしづらいですが。

pc

さらにややこしいのがpc（パイカ）。

pcは1パイカに対応した単位で、1パイカというのはおよそ12ポイントです。

基準となる対象をもつ相対単位

絶対単位に対して、基準となる対象があって、その数値に対応して値が決まるのが相対単位です。

相対単位だと親要素に対してこのサイズというのを決められたりするので、親要素の値が変わったら、相対単位で指定している子要素の値も変化したり、メンテンス性に優れていますし、絶対単位とは違って、レスポンシブ対応にも向いています。

相対単位には以下のようなものがあります。

em

emは要素のフォントサイズに対応した単位です。

つまり親要素に対して1emとすれば同じ大きさになるので、親要素が18pxで、1emを指定すれば同じ18pxになるというわけです。

rem

remはルート要素、つまりhtml要素のフォントサイズに対応した単位です。

ブラウザの標準のフォントサイズが基準となります。

多くのブラウザでは標準のフォントサイズが16pxに設定されているため、フォントサイズに1remと指定すると16pxになります。

ex

exは要素のフォントの小文字のxの高さに対応した単位です。

ch

chは要素のフォントのゼロ（0）の文字幅に対応した単位です。

vw

vwはビューポートの幅の1%に対応した単位です。

ビューポートというのは、ユーザーが使うブラウザの表示領域の幅や高さを表すもので、スマホでブラウザの表示領域をユーザーが変更できない場合などに対して、最適なサイズを指定するために利用します。

vh

vhはビューポートの高さの1%に対応した単位です。

vmin

vminはビューポートの短辺の長さの1%に対応した単位です。

vmax

vmaxはビューポートの長辺の長さの1%に対応した単位です。

角度と時間の単位系

次に角度と時間の単位について説明していきます。

角度の単位系

CSSにおいて角度はグラデーションの関数やトランスフォーム系のプロパティで指定したりします。

角度で指定できる単位には以下のようなものがあります。

deg

degは度数法といって、0〜360までの数値にdegをつけて角度を表します。

90degを指定すると、ちょうど右向きになります。

grad

gradはグラード法といって、0〜400までの数値にgradをつけて角度を表します。

グラード法だと100gradが右向きになります。

rad

radはラジアン数といって、正円1周分を2πとした数値で角度を指定します。

turn

turnは正円1周分を1ターンとした数値にturnをつけて角度を表します。

0.25turnを指定すると、ちょうど右向きになります。

時間の単位系

最後に時間に関する単位についてです。

s

sは1秒に対応した単位です。

ms

msは1/1000秒に対応した単位です。

CSSにおける色々な単位

CSSプロパティでは長さだったり、大きさだったり、角度だったり、時間だったり、色々な単位を数値につけて表現できることがわかりました。

よく使うのは限られてくるかもしれませんが、たとえばフォントサイズを指定するときにemとremの理解がごっちゃになっていたりするかもしれないので、そういった違いも把握しておいた方が、ミスなく思った通りのスタイルが指定できると思います。