2020.09.03 [木] CSSの単位
9月3日、トライデントコンピュータ専門学校では、まだまだ夏休みです。
以前から書いていますが、長期期間中には時間が取りやすいので、普段はなかなか深堀りできないことを調べてみても良いのではないでしょうか。
今回は、CSSの単位についてちょっと調べてみました。
CSSの仕様書は、W3Cが策定しています。
単位に関する使用は「CSS Values and Units Module Level 4」のLengthに書かれています。
このLevel4は、まだ草案段階ですので、ブラウザが対応していない新しい単位も紹介されていたりします。
長さは距離の測定値を指し、プロパティ定義では＜length＞で表されます。長さは寸法です。
長さが0の場合、単位識別子はオプションです（つまり、構文的には＜number＞0として表現できます）。しかし、0がプロパティ（line-heightなど）で＜number＞または＜length＞のどちらかとして解析される場合は、＜number＞として解析されなければなりません。
プロパティは、lengthの値をある範囲に制限することができます。値が許容範囲外の場合、その宣言は無効であり、無視しなければなりません。
いくつかのプロパティでは負の長さの値を許可していますが、これは書式を複雑にする可能性があり、実装固有の制限があるかもしれません。負の長さの値が許可されていても対応できない場合は、対応できる最も近い値に変換する必要があります。
使用される長さがサポートできない場合，ユーザエージェントは，実際の値で近似しなければならない。
長さの単位には、絶対値と相対値の2種類がある。
上記のように、単位には絶対単位と相対単位があると明記されています。
では、その絶対単位と相対単位に分けて調べたいと思います。
絶対単位（Absolute Lengths）
絶対単位とは、他の長さとの関係で決まりません。
一般的にこの単位は常に同じサイズとして扱われます。
| 単位 | 名前 | 他の単位との関係 |
|---|---|---|
| cm | センチメートル（centimeter） | 1cm = 96px/2.54 |
| mm | ミリメートル（millimeter） | 1mm = 1/10 cm |
| Q | 四分ミリメートル（quarter-millimeter） | 1Q = 1/40 cm |
| in | インチ（inch） | 1in = 2.54cm = 96px |
| pc | パイカ（pica） | 1pc = 1in の 1/6 |
| pt | ポイント（point） | 1pt = 1in の 1/72 |
| px | ピクセル（pixel, "画素"） | 1px = 1in の 1/96 |
長さの絶対単位はすべて互換性があり、px はそれらの標準単位です。
pxは親要素の影響を受けず、相対単位の時、子要素の基準となります。
フォントサイズ：30px
フォントサイズ：16px
div{
font-size:30px;
border: 1px solid #ccc;
}
p.size16px{
font-size:16px;
}
