Go to information

CSSの単位

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

相対単位による指定は別のサイズのプロパティに対して相対的なサイズを与え、異なる媒体でも調整されるのに対して、絶対単位による指定は 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 からは包含ブロックの概念が加わり、パーセンテージ値が参照する値はとてもややこしいため、ここでは詳しい説明を省くので、各プロパティのパーセンテージ値の項を参照ください。

色(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 ;
現在位置
  1. W3G
  2. CSS
  3. 前提知識
  4. CSSの単位
ナビゲーション
ステータス情報
作者
上田 遼
公開
2006-01-29T23:34:42+09:00
更新
2008-12-29T04:30:36+09:00
URI
http://w3g.jp/css/guide/units
検索