◆ はじめに
以下は、カスケーディング・スタイル・シート・レベル２（ＣＳＳ２）の単位と色をまとめました。
- スタイルシートの基本的なとこは、スタイルの適用方法を参照してください。
- スタイルシートのリファレンスは、こちらにありますので参照してください。
- 尚、各種ブラウザのCSS2対応状況ガイド（他所様）は、こちらを参照のこと。
◆ 長さの単位
長さや大きさは、数字に単位をつけて指定します。以下のように相対単位と絶対単位があります。
| 種別 | 単位 | 機能 |
|---|---|---|
| 相対単位 | em | 現在のフォントサイズを1とした相対指定 |
| ex | 現在の英字の"x"のサイズを1とした相対指定 | |
| % | 現在のフォントサイズや画面サイズを100%とした相対指定 | |
| 絶対単位 | px | ピクセルで指定 |
| pt | ポイントで指定 | |
| pc | パイカで指定 | |
| in | インチで指定 | |
| cm | センチメートルで指定 | |
| mm | ミリメートルで指定 | |
| (1pt = 1/72in , 1pc = 1/6in , 1in = 2.54cm) | ||
文例
{font-size:12pt} ・・・・フォントサイズ１２ポイント
{margin-left:20px}・・・・左マージン２０ピクセル
{margin-left:20%} ・・・・左マージンを画面幅の２０％
◆ 色の指定
色を指定する方法は以下の通りです。
数値で指定
# に続いて6桁の16進数で指定。(#008000で緑）
# に続いて3桁の16進数で指定。(#08f は #0088ff と同じ）
rgb 関数を用いて 0〜255 の10進数を3つ列挙して指定。rgb(0,128,0) は#008000と同じ指定になります。
rgb 関数を用いて 0%〜100% のパーセント値を3つ列挙して指定。rgb(0%,50%,0%) は #008000 と同じ指定になります。
システムカラーで指定
システムカラーとは、ユーザの環境でシステムの色として設定されているもので、Windowsでは「画面のプロパティのデザイン」に対応するものです。
文例
いずれも緑に設定
{color:#008000}
{color:green}
{color:rgb(0,128,0)}
{color:rgb(0%,50%,0%}
◆ 色指定につての補足説明
色の指定は、上記の通りですが...、目安として以下のパレットがあります。
16色パレットと216色パレットは、Windowsの256色モードでも変わり無く表示すことができます。 しかし、16色パレットと216色パレットのうち、重複する色が8色あり、16＋216−8＝224色にしかなりません。 残りは256−224＝32色となり、どう指定するかは、不明です。
あと、216色パレット中、#0033FF、 #3300FF、#00FF33、#33FF00の４色が正しく表示されない場合があるみたいです。
尚、16色パレットとシステムカラーは、CSS2で定められた色名です。逆に言うとこれ以外の色名は保証がないってことです。注意してください。また、システムカラーに関しては、NN系では思わぬ色になります。これも注意してください。
16色パレット
CSS2 で色名として使えるキーワードは、以下の 16種です。
そして、Netscape NavigatorやInternet Explorerにおいて、Windowsの256色モードでも変わり無く表示することができます。
| 色 | 16進 | 色名 | 色 | 16進 | 色名 | 色 | 16進 | 色名 | 色 | 16進 | 色名 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| #000000 | Black | #808080 | Gray | #C0C0C0 | Silver | #FFFFFF | White | ||||
| #FF0000 | Red | #FFFF00 | Yellow | #00FF00 | Lime | #00FFFF | Aqua | ||||
| #0000FF | Blue | #FF00FF | Fuchsia | #800000 | Maroon | #808000 | Olive | ||||
| #008000 | Green | #008080 | Teal | #000080 | Navy | #800080 | Purple |
216色パレット
下記の216色は、Netscape NavigatorやInternet Explorerにおいて、Windowsの256色モードでも変わり無く表示することができます。
| 色 | １６進 | 色 | １６進 | 色 | １６進 | 色 | １６進 | 色 | １６進 | 色 | １６進 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| #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 |
システムカラー
システムカラーは、CSS2で定められた色名です。しかし、NN系は思わぬ色になります。注意してください。
システムカラーの利点は、ユーザの感覚にフィットしたページの作成ができることと、ユーザ設定が何らかの身体障害に関わりある場合、よりアクセシビリティの高いページを作成できることです。
| システムカラー色名 | 色 | 補足説明 |
|---|---|---|
| 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 | ウィンドウのテキスト |
カラーネームリスト
カラーネームリストです。140色で、Netscapeで定義され、Microsoftでもサポートされましたが、両者では、同じ色名を指定しても、違う色になる場合が多いです。
また、WINDOWSカラーパレットによっても思わぬ色になることがあります。
Netscape NavigatorやInternet Explorerにおいて保証されている色、２１６色パレットをおすすめします。
どうしても色名を使用したい場合は、16色パレットなら安全です。
| 色名 | 色 | R | G | B | 16進 |
|---|---|---|---|---|---|
| white | 255 | 255 | 255 | #FFFFFF | |
| whitesmoke | 245 | 245 | 245 | #F5F5F5 | |
| gainsboro | 220 | 220 | 220 | #DCDCDC | |
| lightgrey | 211 | 211 | 211 | #D3D3D3 | |
| silver | 192 | 192 | 192 | #C0C0C0 | |
| darkgray | 169 | 169 | 169 | #A9A9A9 | |
| gray | 128 | 128 | 128 | #808080 | |
| dimgray | 105 | 105 | 105 | #696969 | |
| black | 0 | 0 | 0 | #000000 | |
| red | 255 | 0 | 0 | #FF0000 | |
| orangered | 255 | 69 | 0 | #FF4500 | |
| tomato | 255 | 99 | 71 | #FF6347 | |
| coral | 255 | 127 | 80 | #FF7F50 | |
| salmon | 250 | 128 | 114 | #FA8072 | |
| lightsalmon | 255 | 160 | 122 | #FFA07A | |
| darksalmon | 233 | 150 | 122 | #E9967A | |
| peru | 205 | 133 | 63 | #CD853F | |
| saddlebrown | 139 | 69 | 19 | #8B4513 | |
| sienna | 160 | 82 | 45 | #A0522D | |
| chocolate | 210 | 105 | 30 | #D2691E | |
| sandybrown | 244 | 164 | 96 | #F4A460 | |
| darkred | 139 | 0 | 0 | #8B0000 | |
| maroon | 128 | 0 | 0 | #800000 | |
| brown | 165 | 42 | 42 | #A52A2A | |
| firebrick | 178 | 34 | 34 | #B22222 | |
| crimson | 220 | 20 | 60 | #DC143C | |
| indianred | 205 | 92 | 92 | #CD5C5C | |
| lightcoral | 240 | 128 | 128 | #F08080 | |
| rosybrown | 188 | 143 | 143 | #BC8F8F | |
| palevioletred | 219 | 112 | 147 | #DB7093 | |
| deeppink | 255 | 20 | 147 | #FF1493 | |
| hotpink | 255 | 105 | 180 | #FF69B4 | |
| lightpink | 255 | 182 | 193 | #FFB6C1 | |
| pink | 255 | 192 | 203 | #FFC0CB | |
| mistyrose | 255 | 228 | 225 | #FFE4E1 | |
| linen | 250 | 240 | 230 | #FAF0E6 | |
| seashell | 255 | 245 | 238 | #FFF5EE | |
| lavenderblush | 255 | 240 | 245 | #FFF0F5 | |
| snow | 255 | 250 | 250 | #FFFAFA | |
| yellow | 255 | 255 | 0 | #FFFF00 | |
| gold | 255 | 215 | 0 | #FFD700 | |
| orange | 255 | 165 | 0 | #FFA500 | |
| darkorange | 255 | 140 | 0 | #FF8C00 | |
| goldenrod | 218 | 165 | 32 | #DAA520 | |
| darkgoldenrod | 184 | 134 | 11 | #B8860B | |
| darkkhaki | 189 | 183 | 107 | #BDB76B | |
| burlywood | 222 | 184 | 135 | #DEB887 | |
| tan | 210 | 180 | 140 | #D2B48C | |
| khaki | 240 | 230 | 140 | #F0E68C | |
| peachpuff | 255 | 218 | 185 | #FFDAB9 | |
| navajowhite | 255 | 222 | 173 | #FFDEAD | |
| palegoldenrod | 238 | 232 | 170 | #EEE8AA | |
| moccasin | 255 | 228 | 181 | #FFE4B5 | |
| wheat | 245 | 222 | 179 | #F5DEB3 | |
| bisque | 255 | 228 | 196 | #FFE4C4 | |
| blanchedalmond | 255 | 235 | 205 | #FFEBCD | |
| papayawhip | 255 | 239 | 213 | #FFEFD5 | |
| cornsilk | 255 | 248 | 220 | #FFF8DC | |
| lightyellow | 255 | 255 | 224 | #FFFFE0 | |
| lightgoldenrodyellow | 250 | 250 | 210 | #FAFAD2 | |
| lemonchiffon | 255 | 250 | 205 | #FFFACD | |
| antiquewhite | 250 | 235 | 215 | #FAEBD7 | |
| beige | 245 | 245 | 220 | #F5F5DC | |
| oldlace | 253 | 245 | 230 | #FDF5E6 | |
| ivory | 255 | 255 | 240 | #FFFFF0 | |
| floralwhite | 255 | 250 | 240 | #FFFAF0 | |
| greenyellow | 173 | 255 | 47 | #ADFF2F | |
| yellowgreen | 154 | 205 | 50 | #9ACD32 | |
| olive | 128 | 128 | 0 | #808000 | |
| darkolivegreen | 85 | 107 | 47 | #556B2F | |
| olivedrab | 107 | 142 | 35 | #6B8E23 | |
| chartreuse | 127 | 255 | 0 | #7FFF00 | |
| lawngreen | 124 | 252 | 0 | #7CFC00 | |
| lime | 0 | 255 | 0 | #00FF00 | |
| limegreen | 50 | 205 | 50 | #32CD32 | |
| forestgreen | 34 | 139 | 34 | #228B22 | |
| green | 0 | 128 | 0 | #008000 | |
| darkgreen | 0 | 100 | 0 | #006400 | |
| seagreen | 46 | 139 | 87 | #2E8B57 | |
| mediumseagreen | 60 | 179 | 113 | #3CB371 | |
| darkseagreen | 143 | 188 | 143 | #8FBC8F | |
| lightgreen | 144 | 238 | 144 | #90EE90 | |
| palegreen | 152 | 251 | 152 | #98FB98 | |
| springgreen | 0 | 255 | 127 | #00FF7F | |
| mediumspringgreen | 0 | 250 | 154 | #00FA9A | |
| honeydew | 240 | 255 | 240 | #F0FFF0 | |
| mintcream | 245 | 255 | 250 | #F5FFFA | |
| azure | 240 | 255 | 255 | #F0FFFF | |
| lightcyan | 224 | 255 | 255 | #E0FFFF | |
| aliceblue | 240 | 248 | 255 | #F0F8FF | |
| darkslategray | 47 | 79 | 79 | #2F4F4F | |
| steelblue | 70 | 130 | 180 | #4682B4 | |
| mediumaquamarine | 102 | 205 | 170 | #66CDAA | |
| aquamarine | 127 | 255 | 212 | #7FFFD4 | |
| mediumturquoise | 72 | 209 | 204 | #48D1CC | |
| turquoise | 64 | 224 | 208 | #40E0D0 | |
| lightseagreen | 32 | 178 | 170 | #20B2AA | |
| darkcyan | 0 | 139 | 139 | #008B8B | |
| teal | 0 | 128 | 128 | #008080 | |
| cadetblue | 95 | 158 | 160 | #5F9EA0 | |
| darkturquoise | 0 | 206 | 209 | #00CED1 | |
| aqua | 0 | 255 | 255 | #00FFFF | |
| cyan | 0 | 255 | 255 | #00FFFF | |
| lightblue | 173 | 216 | 230 | #ADD8E6 | |
| powderblue | 176 | 224 | 230 | #B0E0E6 | |
| paleturquoise | 175 | 238 | 238 | #AFEEEE | |
| skyblue | 135 | 206 | 235 | #87CEEB | |
| lightskyblue | 135 | 206 | 250 | #87CEFA | |
| deepskyblue | 0 | 191 | 255 | #00BFFF | |
| dodgerblue | 30 | 144 | 255 | #1E90FF | |
| ghostwhite | 248 | 248 | 255 | #F8F8FF | |
| lavender | 230 | 230 | 250 | #E6E6FA | |
| lightsteelblue | 176 | 196 | 222 | #B0C4DE | |
| slategray | 112 | 128 | 144 | #708090 | |
| lightslategray | 119 | 136 | 153 | #778899 | |
| indigo | 75 | 0 | 130 | #4B0082 | |
| darkslateblue | 72 | 61 | 139 | #483D8B | |
| midnightblue | 25 | 25 | 112 | #191970 | |
| navy | 0 | 0 | 128 | #000080 | |
| darkblue | 0 | 0 | 139 | #00008B | |
| slateblue | 106 | 90 | 205 | #6A5ACD | |
| mediumslateblue | 123 | 104 | 238 | #7B68EE | |
| cornflowerblue | 100 | 149 | 237 | #6495ED | |
| royalblue | 65 | 105 | 225 | #4169E1 | |
| mediumblue | 0 | 0 | 205 | #0000CD | |
| blue | 0 | 0 | 255 | #0000FF | |
| thistle | 216 | 191 | 216 | #D8BFD8 | |
| plum | 221 | 160 | 221 | #DDA0DD | |
| orchid | 218 | 112 | 214 | #DA70D6 | |
| violet | 238 | 130 | 238 | #EE82EE | |
| fuchsia | 255 | 0 | 255 | #FF00FF | |
| magenta | 255 | 0 | 255 | #FF00FF | |
| mediumpurple | 147 | 112 | 219 | #9370DB | |
| mediumorchid | 186 | 85 | 211 | #BA55D3 | |
| darkorchid | 153 | 50 | 204 | #9932CC | |
| blueviolet | 138 | 43 | 226 | #8A2BE2 | |
| darkviolet | 148 | 0 | 211 | #9400D3 | |
| purple | 128 | 0 | 128 | #800080 | |
| darkmagenta | 139 | 0 | 139 | #8B008B | |
| mediumvioletred | 199 | 21 | 133 | #C71585 |