CSSの単位

Updated / Published

長さ(length)

CSS における長さ(length)というデータは、ひとつの小数点を含めてもよい10進数値の直後に単位識別子を伴う型のことを言います。

font-sizeプロパティ, widthプロパティ, heightプロパティ, marginプロパティ, paddingプロパティなど、セレクタとなっている要素に関する様々なサイズを指定する際には「0」の場合を除き、必ず単位をともなう数値を使って指定します。使われる単位は「絶対単位」と「相対単位」の2種類に大別され、また一部のプロパティでは長さとは別にパーセンテージ(%)を単位とするパーセンテージ値を指定することもできます。絶対単位とは物差しで測ることができる単位を指しますが、ディスプレイ上の設定においてはかなり不正確です。絶対単位に対して相対単位はセレクタ(適用要素)やユーザのディスプレイの環境に依存します。詳細は以下の通りです。

相対単位

em
適用要素のfont-size(フォントサイズ)を「1」としたその倍率
たとえば p要素をセレクタに "16pt" のフォントサイズが指定されている場合、この "16pt" の値が子要素には "1em" と換算されるので、p要素内に span要素があって、span要素をセレクタに "0.75em" のフォントサイズが指定されると、span要素のフォントサイズは "12pt" と換算されます。このように font-sizeプロパティが "em" の単位識別子を定めるプロパティということになります。font-sizeプロパティが"em"で書かれている場合は親要素のフォントサイズが適用されます。
ex
適用要素の英小文字「x」1文字の高さ(x-height)を「1」としたその倍率
小文字の大きさに合わせて調整したい場合に有用とされますが、指定されているフォントの種類により同じフォントサイズであっても異なったサイズで表示されたり、仕様書内においてもトラブルが多いことから使用が推奨されていません。
px
ピクセル数(pixels)で示し、ユーザのディスプレイの画像解像度(画素濃度)に依存する
画像解像度に依り、たとえば Macintosh の72dpi の解像度下では72px1in2.54cm)に、Windows の96dpi の解像度下では96px1in2.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 ;