Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

スタイルシートにおける色の扱い

■ 色の指定

色を指定する方法は以下の通りです。

  1. 数値で指定

     # に続いて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 と同じ指定になります。

  2. 色名で指定
    Red、Blue、Green、White、Black等の16色パレット
  3. システムカラーで指定
    システムカラーとは、ユーザの環境でシステムの色として設定されているもので、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の4色が正しく表示されない場合があるみたいです。

尚、16色パレットとシステムカラーは、CSS2で定められた色名です。逆に言うとこれ以外の色名は保証がないってことです。注意してください。また、システムカラーに関しては、NN系では思わぬ色になります。これも注意してください。

■ 16色パレット

CSS2 で色名として使えるキーワードは、以下の 16種です。

この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色モードでも変わり無く表示することができます。

16進 16進 16進 16進 16進 16進
  #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において保証されている色、216色パレットをおすすめします。

どうしても色名を使用したい場合は、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

 

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial