W3G

相対単位

em

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

ex

適用要素の英小文字「x」１文字の高さ（x-height）を「1」としたその倍率
小文字の大きさに合わせて調整したい場合に有用とされますが、指定されているフォントの種類により同じフォントサイズであっても異なったサイズで表示されたり、仕様書内においてもトラブルが多いことから使用が推奨されていません。

px

ピクセル数（pixels）で示し、ユーザのディスプレイの画像解像度（画素濃度）に依存する
画像解像度に依り、たとえば Macintosh の72dpi の解像度下では72px で1in（2.54cm）に、Windows の96dpi の解像度下では96px で1in（2.54cm）となります。このようにピクセル数（pixels）は同じサイズのディスプレイでも、その解像度の設定によって大きさが異なるため相対単位とされていますが、ほとんどの UAは、"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

相対単位による指定は別のサイズのプロパティに対して相対的なサイズを与え、異なる媒体でも調整されるのに対して、絶対単位による指定は UA によっては相対的な指定として解釈されたり、ディスプレイ上や印刷などの出力メディアに大きく依存するため、相対的な単位よりも使い難いものです。

ユーザ（観覧者）へのユーザビリティ（usability）・アクセシビリティ（accessibility）の点からも、絶対単位を想定したレイアウトではなく、ディスプレイの解像度,、及び表示域のサイズに依存することのない可変的なレイアウトを採用することを考慮したいものです。そのため、できることなら"em" やパーセンテージ値といったユーザ側で調節に融通の利く単位を利用しましょう。

単位は「0」の場合のみ省略できる

(X)HTML の属性値と違って、CSS では「0」を指定する場合を除き、必ず単位を伴って指定する必要があります。単位をつけなければ、UA の標準準拠（standard）モードと後方互換（quirk）モードに依っては誤記とみなされ、その指定が無効とされたり、勝手に "px" の単位識別子を補って拡大解釈することもあるので注意してください。また、単位を省略することはできませんが、絶対値が1未満の場合は頭についている「0」を省いて記述することができます。たとえば、"0.5em" は ".5em" と書くことができます。

関連

!DOCTYPE スイッチ

パーセンテージ値

%

パーセンテージ（%）による割合

パーセンテージ値（割合）は、他の値との相対的な値を実数値の後にパーセンテージ（%）をつけて指定します。どの値を参照するか（基準値）は各プロパティによって異なります。たとえば、font-sizeプロパティの場合は、p要素に "p { font-size : 20px ; }" とあって、p要素内にある子要素の strong要素に "p strong { font-size: 80% ; }" の指定がある場合、この p要素内にある strong要素内のフォントサイズは親要素である p要素の "20px" を基準値として参照し、"16px" と換算されます。CSS2 からは包含ブロックの概念が加わり、パーセンテージ値が参照する値はとてもややこしいため、ここでは詳しい説明を省くので、各プロパティのパーセンテージ値の項を参照ください。

色（color）

(X)HTML における文字や背景の色には 16進数RGB値、またはカラーネームを指定することができましたが、CSS では、さらに4つの色の指定方法が加わり、以下の6通りの指定が可能です。

#rrggbb

ハッシュ（#）に続いて、各RGB値を16進数で2桁づつ、計6桁で表記。

カラーネーム（色名）

カラーネームは16進数RGB値とサブセットになっており、"aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow" の17色のいずれかのキーワードを指定して表記。
white は #ffffff と等価

#rgb

ハッシュ（#）に続いて、16進数RGB値の1-2桁が同じ数値の場合に、その1桁を省略して指定する表記。
#fff は #ffffff と等価

rgb(r%, g%, b%)

rgb() の括弧内に r(赤),g(緑),b(青)それぞれをコンマ（,）で区切って1-100% の割合で指定する表記。
rgb(100%, 100%, 100%) は #ffffff と等価

rgb(r, g, b)

rgb() の括弧内に r(赤),g(緑),b(青)それぞれをコンマ（,）で区切って、0-255の色の段階を数値で指定する表記。
rgb(255, 255, 255) は #ffffff と等価

システムカラー

ユーザのシステムのGUI環境に合せた色を指定して表記。
古い UA の多くはシステムカラーのキーワードによる指定を不明な色として解釈し、次の CSS3 の仕様ではシステムカラーは廃止予定のため、使用は避けた方が無難です。

URI（Uniform Resource Identifier）

url() の括弧内にリソースの所在となる URI を記します。括弧の直ぐ内側には自由に空白類文字を挿入でき、URI はダブルクォーテーション（"）、もしくはシングルクォーテーション（'）の引用符で括ることもできます。つまり、url(URI), url( URI ), url("URI"), url( "URI" ), url('URI'), url( 'URI' ) などのように書くことができます。ただし、引用符で括られていない URI に各種括弧やコンマ（,）、空白類文字、シングルクォーテーション（'），ダブルクォーテーション（"）を含む場合は、バックスラッシュ（\）でエスケープせねばなりません。

URI は絶対URI, 相対URI のどちらでも指定可能で、style属性, style要素内に記述した場合は当該文書が基本URI となり当該文書から見たリソースとの位置関係を示す相対URI を指定し、外部から参照する CSSファイルに記述した場合は、その CSSファイル自体が基本 URI となり、CSSファイルから見たリソースとの位置関係を示す相対URI を指定します。

background-image : url(img/sample.jpg) ;
content                      : url(img/sample.gif) ;
cursor                         : url(img/sample.cur), text ;