CSSの単位

CSSにおける値の単位

CSSに定義する値の単位には、「絶対単位」と「相対単位」があります。

絶対単位とは物差しで測ることができる単位であり、値が正確に決定されます。ただし、ディスプレイ上の設定においては不正確となる可能性があります。

相対単位は基準対象の単位から相対的に計算する単位です。セレクタ(適用する要素)やユーザーのディスプレイの環境に依存します。


なお、CSSの値データにはひとつの小数点を含めることができる10進数の値を指定します。


CSS 絶対単位

cm

センチメートル(centimeters)

1cm = 10mm


mm

ミリメートル(millimeters)

10mm = 1cm


in

インチ(inches)

1in = 2.54cm


pt

ポイント(points)

1pt = 1/72in = 0.3528mm


pc

パイカ(picas)

1pc = 12pt



CSS 相対単位

em

適用要素のfont-size(フォントサイズ)を「1」とした倍率単位です。


p要素をセレクタに「16pt」のフォントサイズが指定した場合、子要素において「1em」は「16pt」と換算されます。

このp要素内にspan要素を定義して、span要素のフォントサイズセレクタに「0.75em」を指定すると、span要素のフォントサイズは「12pt」と換算されます。


ex

適用要素の英小文字「x」の高さ(x-height)を「1」とした倍率単位です。


小文字のフォントサイズに合わせて調整したい場合に有用とされます。

ただし、指定フォントの種類により同じフォントサイズであっても異なるサイズで表示されたり、仕様書内においても問題が生じてるため使わない方が良いとされています。


px

1ピクセル(pixel)を1とした単位です。

ピクセル数(pixels)で示し、ユーザーのディスプレイ画像解像度(画素濃度)に依存して決定されます。

ピクセル数は同サイズのディスプレイでも、その解像度の設定によって大きさが異なります。

Internet Explorerなどでは、「px」を実質的には絶対的な単位として解釈しているようです。


%

基準値からのパーセンテージ(%)による割合を単位です。


参照する基準値は各プロパティによって異なります。

例えば、font-sizeプロパティの場合は、p要素を「p { font-size : 20px ; }」と定義し、p要素内にある子要素の「p strong { font-size: 80% ; }」の定義がある場合、この p要素内にあるstrong要素内のフォントサイズは親要素であるp要素の「20px」を基準値として参照し、「16px」と換算されます。



関連ページ