単位と色/CSS講座

CSS

CSS2の単位と色をまとめました。

長さの単位

長さや大きさは、数字に単位をつけて指定します。

長さ(Lengths)
相対単位(relative units)
  • em: 関連要素の'font-size'の値を参照する
  • ex: 関連フォントの'x-height'を参照する('x-height'は小文字の「x」の高さと等しい場合が多いが'ex'は「x」という文字を含まないフォントに対しても定義される。)
  • px: 閲覧しているデバイスの解像度を参照する
絶対単位(absolute length)
  • in: インチ -- 1inは2.54cmに等しい
  • cm: センチメートル
  • mm: ミリメートル
  • pt: ポイント -- 1ptは1/72inに等しい
  • pc: パイカ -- 1pcは12ptに等しい
パーセント値(Percentages)

他の値に対する相対値

記述例を示します。

{font-size:12pt} /* フォントサイズ12ポイント /*
{margin-left:20px} /* 左の外側余白を20ピクセル /*
{margin-left:20%} /* 左の外側余白を画面幅の20% /*

色の指定

色を指定する方法は2通りあります。

  1. 色名で指定
    1. 16色パレット
    2. システムカラー(ユーザ環境のシステム色)
  2. RGB値で指定
    1. # に続く6桁の16進数で指定。(#008000で緑)
    2. # に続いて3桁の16進数で指定。(#08f#0088ffと同じ)
    3. rgb 関数を用い 0〜255 の10進数を3つ列挙。(rgb(0,128,0)#008000と同じ)
    4. rgb 関数を用い 0%〜100% のパーセント値を3つ列挙。(rgb(0%,50%,0%)#008000と同じ)

/* いずれも緑に設定 /*
{color:green}
{color:#008000}
{color:rgb(0,128,0)}
{color:rgb(0%,50%,0%)}

{color:#080} /* #080は#008800に対応するので少し緑味が強い /*

RGB値で指定……とは?

テレビやパソコンなど、発光することで発色する画面では、すべての色が赤緑青(RGB)という光の3原色の組み合わせから作られます。WWWでは各原色を256階調とし、その組み合わせで256×256×256=16777216色が使用できることになっています。

各原色につき256もの階調をどのように指定したらよいのでしょうか。

#******というのは、赤、緑、青の順に16進数(0123456789abcdef)をふたつずつ並べる方法です。1色につき16進数がふたつなので16×16=256階調を指定できるわけです。

#***は赤、緑、青の順に16進数をひとつずつ並べるので、全部で4096色しか指定できません。しかし特別な事情がない限りこれで十分でしょう。

rgb(*,*,*)は0〜255の10進数でそのまま各原色の階調を記述します。最も明解な指定法ですが、思いのほか希望の色を作ることが難しい方法です。

rgb(*%,*%,*%)は%指定で各原色を100階調で記述する方法です。これも手を出さないのが無難です。

RGB値と実際の発色

Webセーフカラー一覧を眺めていると、RGB値と実際の発色の関係が次第に見えてくるでしょう。ちょっとした慣れが必要だと思います。はじめのうちはWebセーフカラーだけを使うとよいのではないでしょうか。

カラーチャート

  1. 16色パレット
  2. システムカラー
  3. Webセーフカラー

16色パレット

CSS2で色名として使えるキーワードは、以下の16種です。数年前よりNetscape NavigatorおよびInternet Explorerでは140の色名に対応していますが、仕様が追随する可能性はありません。将来的には以下の16色以外の色名による指定に対応するブラウザは消えるでしょう。

16色パレット
black#000000
gray#808080
silver#c0c0c0
white#ffffff
red#ff0000
yellow#ffff00
lime#00ff00
aqua#00ffff
blue#0000ff
fuchsia#ff00ff
maroon#800000
olive#808000
green#008000
teal#008080
navy#000080
purple#800080

システムカラー

システムカラーは、CSS2で定められた色名です。ユーザのシステム設定が反映されるため、とくに身体障害等への対応のためシステム設定を調整している閲覧者に対して、効果的なデザインを提供できるのが利点です。

システムカラー一覧
色名説明
ActiveBorder アクティブウィンドウの境界
ActiveCaption アクティブウィンドウのタイトルバー
AppWorkspace アプリケーション内のウインドウの背景
Background デスクトップの背景
ButtonFace ボタンの表面
ButtonHighlight ボタンの光の当たっている面
ButtonShadow ボタンの影
ButtonText ボタンのテキスト
CaptionText タイトルバーのテキスト
GrayText 選択不能テキスト
Highlight 選択された項目
HighlightText 選択されたテキスト
InactiveBorder 非アクティブウィンドウの境界
InactiveCaption 非アクティブタイトルバーのタイトルバー
InactiveCaptionText 非アクティブタイトルバーのタイトルバーテキスト
InfoBackground ツールチップの背景
InfoText ツールチップのテキスト
Menu メニューの背景
MenuText メニューのテキスト
Scrollbar スクロールバー
ThreeDDarkShadow 立体の暗い影
ThreeDFace 立体の表面
ThreeDHighlight 立体の光の当たっている面
ThreeDLightShadow 立体の明るい影
ThreeDShadow 立体の影
Window ウィンドウの背景
WindowFrame ウィンドウのフレーム
WindowText ウィンドウのテキスト

Webセーフカラー

各256階調のRGB値を各6階調としたのがWebセーフカラーです。6×6×6=216色あります。

Webセーフカラー一覧
#000000#330000#660000#990000#cc0000#ff0000
#003300#333300#663300#993300#cc3300#ff3300
#006600#336600#666600#996600#cc6600#ff6600
#009900#339900#669900#999900#cc9900#ff9900
#00cc00#33cc00#66cc00#99cc00#cccc00#ffcc00
#00ff00#33ff00#66ff00#99ff00#ccff00#ffff00
#000033#330033#660033#990033#cc0033#ff0033
#003333#333333#663333#993333#cc3333#ff3333
#006633#336633#666633#996633#cc6633#ff6633
#009933#339933#669933#999933#cc9933#ff9933
#00cc33#33cc33#66cc33#99cc33#cccc33#ffcc33
#00ff33#33ff33#66ff33#99ff33#ccff33#ffff33
#000066#330066#660066#990066#cc0066#ff0066
#003366#333366#663366#993366#cc3366#ff3366
#006666#336666#666666#996666#cc6666#ff6666
#009966#339966#669966#999966#cc9966#ff9966
#00cc66#33cc66#66cc66#99cc66#cccc66#ffcc66
#00ff66#33ff66#66ff66#99ff66#ccff66#ffff66
#000099#330099#660099#990099#cc0099#ff0099
#003399#333399#663399#993399#cc3399#ff3399
#006699#336699#666699#996699#cc6699#ff6699
#009999#339999#669999#999999#cc9999#ff9999
#00cc99#33cc99#66cc99#99cc99#cccc99#ffcc99
#00ff99#33ff99#66ff99#99ff99#ccff99#ffff99
#0000cc#3300cc#6600cc#9900cc#cc00cc#ff00cc
#0033cc#3333cc#6633cc#9933cc#cc33cc#ff33cc
#0066cc#3366cc#6666cc#9966cc#cc66cc#ff66cc
#0099cc#3399cc#6699cc#9999cc#cc99cc#ff99cc
#00cccc#33cccc#66cccc#99cccc#cccccc#ffcccc
#00ffcc#33ffcc#66ffcc#99ffcc#ccffcc#ffffcc
#0000ff#3300ff#6600ff#9900ff#cc00ff#ff00ff
#0033ff#3333ff#6633ff#9933ff#cc33ff#ff33ff
#0066ff#3366ff#6666ff#9966ff#cc66ff#ff66ff
#0099ff#3399ff#6699ff#9999ff#cc99ff#ff99ff
#00ccff#33ccff#66ccff#99ccff#ccccff#ffccff
#00ffff#33ffff#66ffff#99ffff#ccffff#ffffff

RGB値を指定する4つの表現それぞれについて、6階調が実際のどのような数値に対応するかを以下にまとめました。

各RGB値指定における6階調の表現
16進数 #******00336699ccff
16進数 #***0369cf
10進数 rgb(*,*,*)051102153204255
% rgb(*%,*%,*%)0%20%40%60%80%100%