CSS2の単位と色をまとめました。
長さや大きさは、数字に単位をつけて指定します。
他の値に対する相対値
記述例を示します。
{font-size:12pt} /* フォントサイズ12ポイント /*
{margin-left:20px} /* 左の外側余白を20ピクセル /*
{margin-left:20%} /* 左の外側余白を画面幅の20% /*
色を指定する方法は2通りあります。
#008000で緑)#08fは#0088ffと同じ)rgb(0,128,0)は#008000と同じ)rgb(0%,50%,0%)は#008000と同じ)/* いずれも緑に設定 /*
{color:green}
{color:#008000}
{color:rgb(0,128,0)}
{color:rgb(0%,50%,0%)}
{color:#080} /* #080は#008800に対応するので少し緑味が強い /*
テレビやパソコンなど、発光することで発色する画面では、すべての色が赤緑青(RGB)という光の3原色の組み合わせから作られます。WWWでは各原色を256階調とし、その組み合わせで256×ばつかける256×ばつかける256=わ16777216色が使用できることになっています。
各原色につき256もの階調をどのように指定したらよいのでしょうか。
#******というのは、赤、緑、青の順に16進数(0123456789abcdef)×ばつ16=256階調を指定できるわけです。
#***は赤、緑、青の順に16進数をひとつずつ並べるので、全部で4096色しか指定できません。しかし特別な事情がない限りこれで十分でしょう。
rgb(*,*,*)は0〜255の10進数でそのまま各原色の階調を記述します。最も明解な指定法ですが、思いのほか希望の色を作ることが難しい方法です。
rgb(*%,*%,*%)は%指定で各原色を100階調で記述する方法です。これも手を出さないのが無難です。
Webセーフカラー一覧を眺めていると、RGB値と実際の発色の関係が次第に見えてくるでしょう。ちょっとした慣れが必要だと思います。はじめのうちはWebセーフカラーだけを使うとよいのではないでしょうか。
CSS2で色名として使えるキーワードは、以下の16種です。数年前よりNetscape NavigatorおよびInternet Explorerでは140の色名に対応していますが、仕様が追随する可能性はありません。将来的には以下の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 | ウィンドウのテキスト |
各256階調のRGB値を各6階調としたのがWe×ばつ6=216色あります。
| #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階調が実際のどのような数値に対応するかを以下にまとめました。
| 16進数 #****** | 00 | 33 | 66 | 99 | cc | ff |
|---|---|---|---|---|---|---|
| 16進数 #*** | 0 | 3 | 6 | 9 | c | f |
| 10進数 rgb(*,*,*) | 0 | 51 | 102 | 153 | 204 | 255 |
| % rgb(*%,*%,*%) | 0% | 20% | 40% | 60% | 80% | 100% |