単位を学ぶ

2019.12

CSSには様々な単位があります。使い方によってコーディングが楽になりますので、単位の種類を覚えましょう。

コンテンツ一覧

絶対単位

外部に影響を受けない、そのもので完了する値で指定したいときに使う単位です。

では実際にサイズの違いを見てましょう。

font-size:10px;
font-size:1in;
font-size:10pt;
font-size:1pc;
font-size:10mm;
font-size:1cm;
font-size:10Q;

10px

1in

10pt

1pc

10mm

1cm

10Q

表示サイズの都合上すべてを同じ数値にすることができませんが、それぞれのサイズの違いを認識できたかと思います。

他の長さや設定によって値が変化する単位です。レスポンシブデザイン等で活躍します。

文字プロパティfontに関する相対単位を紹介します。

単位	説明
em	要素のフォントサイズを基準とした単位
rem	ルート要素（）のフォントサイズを基準とした単位
ch	要素に0があった場合、その0の幅を基準とした単位です。
ex	要素に小文字xがあった場合、そのxの高さを基準とした単位です。
cap	その要素の大文字の高さを基準とした単位です。
lh	その要素のline-heightプロパティの計算値を基準にした単位です。
rlh	ルート要素のline-heightプロパティの計算値を基準にした単位です。

参考までに当サイトで上記の単位を使用した例を下記に表示します。

5em

5rem

5ch

5ex

5cap

5lh

5rlh

viewport（ビューポート）によって値が変化する単位をご紹介します。

今回の記事ではcssで使用できる単位について紹介しました。文字で説明されてもなかなかピンときにくい概念ですので、まずは使用してみてその使い勝手を試してみるといいでしょう。