■色

 Webページにとって色は非常に重要な部分を占めます。配色の設定によりサイトのイメージが大きく変わってしまいます。背景色に白を設定すれば、清潔/寒さ等をユーザにイメージとして伝えることが出来ます。背景色を黒に設定すれば、暗い/怪しい等のイメージを与えるでしょう。また文字色の組み合わせによってはWebページが見やすくなったり、見にくくなってしまうこともあります。配色の設定によってユーザに与えるサイトのイメージが決まるので、簡単に決めないでよく考えて配色しましょう。

 配色をするにはどのような色があるのかをまずは知らなければいけません。これ以降に様々な色を展示していますので、参考にしてみて下さい。

■基本色についての説明

 HTML 4.01 仕様書に、以下の色がRGB色で指定されています。RGB色による指定も可能ですし、文字による指定も可能です。

基本色
色名RGB 色名RGB
 Black#000000 Silver#C0C0C0
 Gray#808080 White#FFFFFF
 Maroon#800000 Red#FF0000
 Purple#800080 Fuchsia#FF00FF
 Green#008000 Lime#00FF00
 Olive#808000 Yellow#FFFF00
 Navy#000080 Blue#0000FF
 Teal#008080 Aqua#00FFFF

■属性とスタイルシートの移行について

 現在<FONT>タグや<BODY>タグ等で、現在多くのページが、属性によってCOLOR指定をしているがHTML4.01によれば推奨はしないとなっています。
 その代わりに、スタイルシートを用いることを勧めています。ただし、現在スタイルシートはブラウザの環境によって異なる動作を起こす場合もあるので、タグによる設定をしなければいけない場合もあるかもしれませんが、これからはスタイルシートに移行していくでしょう。

■配色についての配慮について

 色については、十分に注意を払う必要があります。何故ならば、背景色と文字色が何も考えずに設定すると、ページが非常に見にくくなったりするからです。おまけにそのページの印象を大きく変えることになるでしょう。
 他にも考えなければならない点としては、色盲の方のことです。色盲の方をを困らせるような配色には様々なパターンがあります。なるべくみんなのことを考えて配色を考えていきましょうね。それが人に優しいページ作りとなります。

■Web Safe Colorについて

 Web Safe Colorで指定しておけば、自分が思っていた色に思っていたものと同様の色で表示されます。
 しかし、これ以外の色ですとブラウザ(Internet ExplorerやNetscape Navigator)によってはWeb Safe Colorに置き換えられてしまう可能性があります。ということは、最初からWeb Safe Colorにしておけば思った通りの色の表示になります。
Web Safe Color
Color Code:
                                                     
                                                     
                                                     
                                                     
                                                     
                                                     
                                                     
                                                     
                                                     
                                                     
                                                     
                                                     

■基本色以外の色について

 以下の色名によるものは各ブラウザが独自に対応している色です。また、ブラウザによっては、解釈できないものもあります。なるべくRGB指定にしたほうが良いでしょう。
 以下のものは色名した色とRGB指定したものの対応表です。

色名RGB色名RGB色名RGB
 aliceblue#F0F8FF antiquewhite#FAEBD7 aqua#00FFFF
 aquamarine#7FFFD4 azure#F0FFFF beige#F5F5DC
 bisque#FFE4C4 black#000000 blanchedalmond#FFEBCD
 blue#0000FF blueviolet#8A2BE2 brass#B5A642
 brown#A52A2A burlywood#DEB887 cadetblue#5F9EA0
 chartreuse#7FFF00 chocolate#D2691E coolcopper#BFBFBF
 copper#BF00DF coral#FF7F50 cornflower#BFDFEF
 cornflowerblue#6090EF cornflowerblue#6495ED cornsilk#FFF8DC
 crimson#DC143C cyan#00FFFF darkblue#00008B
 darkbrown#DA0B00 darkcyan#008B8B darkgoldenrod#B8860B
 darkgray#A9A9A9 darkgreen#006400 darkkhaki#BDB76B
 darkmagenta#8B008B darkolivegreen#556B2F darkorange#FF8C00
 darkorchid#9932CC darkred#8B0000 darksalmon#E9967A
 darkseagreen#8FBC8B darkseagreen#8FBC8F darkslateblue#483D8B
 darkslategray#2F4F4F darkturquoise#00CED1 darkviolet#9400D3
 deeppink#FF1493 deepskyblue#00BFFF dimgray#696969
 dodgerblue#1E90FF feldsper#FED0E0 firebrick#B22222
 floralwhite#FFFAF0 forestgreen#228B22 fuchsia#FF00FF
 gainsboro#DCDCDC ghostwhite#F8F8FF gold#FFD700
 goldenrod#DAA520 gray#808080 green#008000
 greenyellow#ADFF2F honeydew#F0FFF0 hotpink#FF69B4
 indianred#CD5C5C indigo#4B0082 ivory#FFFFF0
 khaki#F0E68C lavender#E6E6FA lavenderblush#FFF0F5
 lawngreen#7CFC00 lemonchiffon#FFFACD lightblue#ADD8E6
 lightcoral#F08080 lightcyan#E0FFFF lightgoldenrodyellow#FAFAD2
 lightgreen#90EE90 lightgrey#D3D3D3 lightpink#FFB6C1
 lightsalmon#FFA07A lightseagreen#20B2AA lightskyblue#87CEFA
 lightslategray#778899 lightsteelblue#B0C4DE lightyellow#FFFFE0
 lime#00FF00 limegreen#32CD32 linen#FAF0E6
 magenta#FF00FF maroon#800000 mediumaquamarine#66CDAA
 mediumblue#0000CD mediumorchid#BA55D3 mediumpurple#9370DB
 mediumsateblue#0E00B0 mediumseagreen#3CB371 mediumslateblue#7B68EE
 mediumspringgreen#00FA9A mediumturquoise#48D1CC mediumvioletred#C71585
 midnightblue#191970 mintcream#F5FFFA mistyrose#FFE4E1
 moccasin#FFE4B5 navajowhite#FFDEAD navy#000080
 oldlace#FBF5E6 oldlace#FDF5E6 olive#808000
 olivedrab#6B8E23 orange#FFA500 orangered#FF4500
 orchid#DA70D6 palegoldenrod#EEE8AA palegreen#98FB98
 paleturquoise#AFEEEE palevioletred#DB7093 papayawhip#FFEFD5
 peachpuff#FFDAB9 peru#CD853F pink#FFC0CB
 plum#DDA0DD powderblue#B0E0E6 purple#800080
 red#FF0000 richblue#0CB0E0 rosybrown#BC8F8F
 royalblue#4169E1 saddlebrown#8B4513 salmon#FA8072
 sandybrown#F4A460 seagreen#2E8B57 seashell#FFF5EE
 sienna#A0522D silver#C0C0C0 skyblue#87CEEB
 slateblue#6A5ACD slategray#708090 snow#FFFAFA
 springgreen#00FF7F steelblue#4682B4 tan#D2B48C
 teal#008080 thistle#D8BFD8 tomato#FF6347
 turquoise#40E0D0 violet#EE82EE wheat#F5DEB3
 white#FFFFFF whitesmoke#F5F5F5 yellow#FFFF00
 yellowgreen#9ACD32      

■システムカラーについて

 CSS2により、システムが使用するシステムカラーを使うことが可能となりました。当然システムが現在使用している色となりますので、各々の人の環境に左右された色となります。以下に示します。

色名説明
 activeborderアクティブなウィンドウの枠色
 activecaptionアクティブなウィンドウのタイトルバー色
 appworkspaceアプリケーション内(MDI)のウィンドウの背景色
 backgroundデスクトップの背景色
 buttonface立体的なボタンの表面色
 buttonhighlight選択されたボタンの面
 buttonshadow立体的なボタンの影になってる面
 buttontext立体的なボタンのテキスト色
 captiontextタイトルバーのテキスト色
 graytext選択できないテキスト色
 highlightリストの選択部分の色
 highlighttextリストの選択部分の文字色
 inactiveborder非アクティブウィンドウの枠色
 inactivecaption非アクティブウィンドウのタイトルバー色
 inactivecaptiontext非アクティブウィンドウのタイトルバーテキスト色
 infobackgroundツールチップの背景色
 infotextツールチップのテキスト色
 menuメニューの背景色
 menutextメニューのテキスト色
 scrollbarスクロールバーの色
 threeddarkshadow立体的に表示される部分の暗い影色
 threedface立体的に表示される部分の表面色
 threedhighlight立体的に表示される部分の光の当たっている面色
 threedlightshadow立体的に表示される部分の明るい影色
 threedshadow立体的に表示される部分の影色
 windowウィンドウ色
 windowfremeウィンドウのフレーム色
 windowtextウィンドウのテキスト色



広告収入で収入アップ!!
あなたのホームページ・メールマガジンに広告を載せてみませんか?成功報酬型で広告費を支払うエーハチネットがおすすめ。私はこれで月に5万円を稼いでいます!!
Copyright © 2000-2003 ACCESS R All rights reserved. Presented by Ruby