webで使用する単位

webで使用される単位には「絶対単位」、「相対単位」、「パーセンテージ」の指定方法があります。

・相対単位による指定は別のサイズのプロパティに対して相対的なサイズを与え、 異なる媒体でも調整されます。em、ex、px があります。
・絶対単位は、物差しで測ることができる単位です。
 絶対単位による指定は ユーザー環境によっては相対的な指定として解釈され、
 ディスプレイ上や印刷などの出力メディアに大きく依存するため、相対的な単位
 よりも使い難いものです。ページ内容とフォントのサイズには、絶対単位の指定
 を避けて、em か パーセンテージ値(%)を使うことをお奨めします。ディスプ
 レイ上の設定においてはかなり不正確です。
 cm、mm、in(インチ)、pt(ポイント)、pc(パイカ)があります。

〜相対単位〜
■em 適用要素のfont-size(フォントサイズ)を「1」とした倍率。
例)p要素に "16pt" のフォントサイズが指定されている場合、"16pt" の値が子要素には "1em" と換算されます。この p要素内に span要素があった場合、span要素のセレクタに "0.75em" とフォントサイズを指定すると、span要素のフォントサイズは "12pt" と換算されます。このように font-sizeプロパティが "em" の単位識別子を定めるプロパティということになります。

■ex 英小文字「x」の1文字の高さ(x-height)を「1」としたその倍率。
小文字の大きさに合わせて調整したい場合に有用とされますが、指定されているフォントの種類により同じフォントサイズであっても異なったサイズで表示されたり、仕様書内においても問題が生じてるため使わない方が良いとされています。

■px ピクセル数(pixels)で示し、ユーザーのディスプレイの画像解像度(画素濃度)に依存します。
画像解像度に依り、たとえば Macintosh の72dpi の解像度下では72px で1in(2.54cm)に、Windows の96dpi の解像度下では96px で1in(2.54cm)となります。このようにピクセル数(pixels)は同じサイズのディスプレイでも、その解像度の設定によって大きさが異なるため相対単位とされていますが、ほとんどの UA(特に Internet Explorer)は、"px" を実質的には絶対的な単位として解釈しているようです。


〜絶対単位〜
■cm (centimeters)
1cm = 10mm
■mm (millimeters)
10mm = 1cm
■in (inches)
1in = 2.54cm
■pt (points)
1pt = 1/72in = 0.3528mm
■pc パイカ(picas)
1pc = 12pt

〜パーセンテージ(%)〜
p要素に "p { font-size : 20px ; }" と指定する。p要素内にある子要素の strong要素に "p strong { font-size: 80% ; }" の指定があった場合、この p要素内にある strong要素内のフォントサイズは親要素である p要素の "20px" を基準値として参照し、"16px" と換算されます。
※CSS2 からは包含ブロックの概念が加わりました。



参考URL:http://w3g.jp/css/guide/units