単位による長さの表し方
スタイルシートでは、文字の大きさやボックスの長さなど、常にサイズを指定する必要があります。
スタイルシートでのサイズの表し方は、大きく分けて2種類あります。
一つはあるものを基準として長さを指定する『相対単位』とサイズを絶対的に指定する『絶対単位』があります。
また、ぞれぞれの長さの単位は以下のようにさらに細かく分けて指定することができます。
| 絶対サイズ指定 | |
|---|---|
| 長さの単位 | 基準の長さ |
| in | インチ（1inch=2.54cm） |
| mm | ミリメートル |
| cm | センチメートル |
| pt | ポイント（72ポイント=1インチ） |
| pc | パイカ（1pc=12ポイント） |
| 相対サイズ指定 | |
|---|---|
| 長さの単位 | 基準の長さ |
| ex | 「x」の文字の高さ |
| em | 1文字分の高さ |
| px | 画面の1次点 |
| 相対パーセント指定 | |
| % | 親要素など |
exやemの場合
exやemは文字の高さを基準とする相対単位ですので、基準となる長さはその要素で指定する『font-size』プロパティの指定を基準とします。
CSSサンプル
p { font-size:15px ; padding-left:2em; }
段落の文字サイズを15ピクセル、左側の余白をフォントサイズの2倍にとる
サンプル
文字サイズ（font-size）に直接exやemで指定した場合
代わって、今度はフォントサイズに直接exやemで指定した場合です。
この場合に表示される文字サイズは、その要素の親にあたる親要素で指定された文字サイズ（font-sizeプロパティ）が基準となります。
CSSサンプル
p { font-size:15px ; }
strong { font-size:1.2em ; }
段落の文字サイズを15ピクセル、強調文字をその1.2倍で表示
サンプル
パーセントによる指定
パーセントによる指定での基準となる長さは、その要素によって異なります。
例えば、font-sizeプロパティの場合、基準となる長さは親要素です。
このとき、見出し<h1>を例に取った場合、その親要素は多くbody要素ですから、body要素で、文字サイズが定められていた場合、その文字サイズが基準となります。
ただし、親要素で文字サイズを指定していない場合は、基準となる長さは、WEBブラウザに依存されます。
