大きさの単位について。
CSSにおける、"大きさ"の単位に関して解説します。
"大きさの単位"における二つのタイプ。
フォントの大きさやブロックの大きさなど、視覚系のスタイルには"大きさ"と言う概念が付き物です。
CSSの仕様では、大きさの単位について、二つのタイプを定めております。
- 絶対的な大きさ
- どんな環境であっても大きさが変わり得ない単位です。例えばミリメートル単位で指定された場合、どんな環境であってもそれに従うべきと言う事になります。
- 相対的な大きさ
- 環境が変わると大きさが変わり得る単位です。例えば閲覧者がユーザエージェントに設定したフォントサイズを基準とした場合、設定が変われば大きさは全く異なるでしょう。
以下、CSSで定められている単位についてそれぞれに該当するものを解説します。
相対的な大きさ。
上述の通り、相対的な大きさの単位とは、環境が変わると大きさが変わり得る単位です。
現在、以下の単位が定められております。
em- 当該セレクタ内で用いられるフォントの高さを 1とするものです。
- しばしば字数単位と見なされます。
- 尚、フォントの横幅は不定なため、横幅を 1とする単位は存在しません。
ex- 当該セレクタ内で用いられるフォントでの「x」の字の高さを 1とするものです。
px- ピクセル単位です。
- 環境が変われば大きさが異なるため、相対的な値とされておりますが、環境を変えない限りは大きさを変化させる事が出来ず、そのため絶対的な大きさと誤解される事も多いようです。
%- プロパティにより定められた基準値に対するパーセンテージとなります。
- 一部プロパティではパーセンテージを利用出来ないものがあります。
- パーセンテージは、仕様書では大きさの単位とは別立てで定義されておりますが、大きさを表すためのものなので、ここで解説しました。