CSS における長さ(length)というデータは、ひとつの小数点を含めてもよい10進数値の直後に単位識別子を伴う型のことを言います。
font-sizeプロパティ, widthプロパティ, heightプロパティ, marginプロパティ, paddingプロパティなど、セレクタとなっている要素に関する様々なサイズを指定する際には「0」の場合を除き、必ず単位をともなう数値を使って指定します。使われる単位は「絶対単位」と「相対単位」の2種類に大別され、また一部のプロパティでは長さとは別にパーセンテージ(%)を単位とするパーセンテージ値を指定することもできます。絶対単位とは物差しで測ることができる単位を指しますが、ディスプレイ上の設定においてはかなり不正確です。絶対単位に対して相対単位はセレクタ(適用要素)やユーザーのディスプレイの環境に依存します。詳細は以下の通りです。
emfont-size(フォントサイズ)を「1」としたその倍率p要素をセレクタに "16pt" のフォントサイズが指定されている場合、この "16pt" の値が子要素には "1em" と換算されるで、この p要素内に span要素があって、span要素をセレクタに "0.75em" のフォントサイズが指定されると、span要素のフォントサイズは "12pt" と換算されます。このように font-sizeプロパティが "em" の単位識別子を定めるプロパティということになります。expx72dpi の解像度下では72px で1in(2.54cm)に、Windows の96dpi の解像度下では96px で1in(2.54cm)となります。このようにピクセル数(pixels)は同じサイズのディスプレイでも、その解像度の設定によって大きさが異なるため相対単位とされていますが、ほとんどの UA(特に Internet Explorer)は、"px" を実質的には絶対的な単位として解釈しているようです。cm1cm = 10mmmm10mm = 1cmin1in = 2.54cmpt1pt = 1/72in = 0.3528mmpc1pc = 12pt相対単位による指定は別のサイズのプロパティに対して相対的なサイズを与え、異なる媒体でも調整されるのに対して、絶対単位による指定は UA によっては相対的な指定として解釈されたり、ディスプレイ上や印刷などの出力メディアに大きく依存するため、相対的な単位よりも使い難いものです。ページ内容とフォントのサイズには、絶対単位の指定を避けて、em か パーセンテージ値(%)を使うことをお奨めします。
(X)HTML の属性値と違って、CSS では「0」を指定する場合を除き、必ず単位を伴って指定する必要があります。単位をつけなければ、UA の標準準拠(standard)モードと後方互換(quirk)モードに依っては誤記とみなされ、その指定が無効とされたり、勝手に "px" の単位識別子を補って拡大解釈することもあるので注意してください。また、単位を省略することはできませんが、絶対値が1未満の場合は頭についている「0」を省いて記述することができます。たとえば、"0.5em" は ".5em" と書くことができます。
ユーザー(観覧者)のユーザビリティ(usability)・アクセシビリティ(accessibility)の点からできることならサイト設計時には、文字サイズ等も含めて絶対単位の指定のみを想定したデザインではなく、ディスプレイの解像度,、及び表示域のサイズに依存することのない可変的なリキッドレイアウトを採用することを考慮したいものです。たとえば文字サイズを指定する場合、Macintosh版・Windows版を問はず Internet Explorer では制作者側が絶対単位、または px の単位識別子でフォントサイズを指定している場合、ユーザー側ではそのフォントサイズから変更することができません(Windows版Internet Explorer 7 には一応ズーム機能あり)。これに対して Safari, Firefox, Opera の最新バージョンでは指定された文字の大きさが絶対単位の指定であろうが相対単位の指定であろうが関係なくユーザ側でフォントサイズを任意に調節することが可能です。
Internet Explorer での観覧しか想定していない・できていないようなフローズンレイアウトのウェブページをユーザー側でフォントサイズを任意に調節できる UA で観覧すると、フォントサイズを一段階大きくすれば、positionプロパティで絶対配置を指定されている要素同士が重なったりして文字が読めなくなったり、ボックスの領域から内容がはみ出してデザインが崩れたりと、そのページの内容自体に何が書かれてあったのかがわからなくなってしまうような困ったデザインがよくあります。そんなことにならないためにも、サイト設計には(できることなら)リキッドレイアウトを想定して "em" やパーセンテージ値といったユーザー側で調節に融通の利く単位を利用しましょう。
%%)による割合パーセンテージ値(割合)は、他の値との相対的な値を実数値の後にパーセンテージ(%)をつけて指定します。どの値を参照するか(基準値)は各プロパティによって異なります。たとえば、font-sizeプロパティの場合は、p要素に "p { font-size : 20px ; }" とあって、p要素内にある子要素の strong要素に "p strong { font-size: 80% ; }" の指定がある場合、この p要素内にある strong要素内のフォントサイズは親要素である p要素の "20px" を基準値として参照し、"16px" と換算されます。CSS2 からは包含ブロックの概念が加わり、パーセンテージ値が参照する値はとてもややこしいため、ここでは詳しい説明を省くので、各プロパティのパーセンテージ値の項を参照ください。
(X)HTML における文字や背景の色には 16進数RGB値、またはカラーネームを指定することができましたが、CSS では、さらに4つの色の指定方法が加わり、以下の6通りの指定が可能です。
#rrggbb#)に続いて、各RGB値を16進数で2桁づつ、計6桁で表記。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 と等価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 ;