みなさま、こんにちは！
株式会社ホワイトボードのフロントエンジニアの末ちゃんこと、末吉です。

いよいよ秋ですね。少しずつ紅葉も始まってきて、季節感を感じてはいるものの、
すごく寒くて、一気に冬が来たのではないかとも感じてしまいます。

さて、自分の備忘録かねて今日はCSSの単位について一覧をつくりたいと思います。

CSSの単位とは

コンピュータの中にも大きさや長さの単位があります。
CSSやウェブの場合の基本単位は、ピクセルです。

ピクセルとは

ピクセルとは、ひとつのドット（点）のことを言います。
皆さんが普段目にしているパソコンやスマホの画面は、たくさんのドットが集まってできています。

最近聞く言葉だと4Kというのがありますね。
4K対応テレビは昨今のブームになっているようです。

この4Kですが、なんのことかというと画面の解像度（ドットの数）のことを指しています。
つまりドットの数が、横3,840個、縦が2,160個あり、全部で8,294,400個のドットがある画面のことを言います。

このドットの数が多ければ多いほど、より大きな画面領域（画面の物理的な大きさではない）が確保出来たり、より美しく画面を表示させることができます。
モニタやパソコンを買うときはより大きな解像度のものを選ぶと、より綺麗に画面を表示させることができます。
PCはFullHD、1920×1080ピクセルが今の主流です。

単位

さて単位には絶対値と相対値があります。
普段の生活でも1cmは絶対の単位ですが、1%は相対的な単位ですね。
同じようにCSSでも絶対の単位と相対の単位と2種類あります。

絶対的単位

pt

1/72インチを1とする単位で、ポイントと読みます。

pc

12ptを1とする単位で、パイカと読みます。

mm

普段使う単位ですね、ミリメートルです。

cm

こちらも普段使う単位です、センチメートルです。

in

こちらはインチです。1インチ=25.4mm を1とする単位です。

相対的単位

px

PCでは良く目にします。ピクセルです。画面のドット1つを1とする単位です。

%

パーセントです。割合を指定することができます。

em

親要素のフォントサイズを1とする単位です。

rem

ルート要素（html）のフォントサイズを1とする単位です。

vw

viewport width の略で、画面の幅に対しての割合の単位です。画面横幅いっぱいで100vwになります。

vh

viewport height の略で、画面の高さに対しての割合の単位です。画面縦幅いっぱいで100vhになります。

vmin

vwかvhのうち、値が小さい方に対する割合です。

vmax

vwかvhのうち、値が大きい方に対する割合です。

ex

小文字の x を1とする単位です。

---

 

単位ってこんなにあるんですね。
今よく使われている単位は、pxはもちろんremや％ですが、今後はレスポンシブ対応に対しての利便性を求めてvwやvhが多様されていくと思います。

今まではCSSも単位を数値で単純に指定して書くことが多かったのですが、昨今はCSSのcalc()を使用してブラウザに演算させながらサイズを指定してくることも多くなってきました。
時代に取り残されないよう、常に勉強していきたいですね。

それではまた来週お会いしましょう！