アクセスを増やす20の方法
色入門・色見本
トップ >
色入門・色見本
<font color="..."> や <body bgcolor="..."> などの色を指定する属性では、次のような方法で色を指定します。
- color="#FF0000" ... 色のRGB値を指定する。
- color="red" ... 色の名前を指定する。
RGB値は #FF0000 のように、光の三原色である赤(R)、緑(G)、青(B)の配分を00〜FFまでの16進数で記述します。一般に、値が大きいと明るい色、小さいと暗い色、RGBの値の差が大きいとケバケバしい色、差が小さいと淡い色になります。Windowsのペイントブラシのカラーパレットなどを利用して、自分の好みの色をみつけるのもよいでしょう。
下記の16色の名前がHTML3.2で定義されています。これらの名前は、IE2.0 や Netscape Navigator 2.0 でも安心して使用することができます。
|
■ 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) |
ディスプレイが256色モードの時にInternet ExplorerやNetscape Navigatorで表示を行うと、微妙な色は、下記の216色パレットの中から近いものを選び出して置き換えられるため、自分が思っていたのと全然異なる色使いになってしまうことがあります。逆に言うと、最初から下記の色（および上記基本16色）で作成しておけば、256色モードでも自分が思っていた通りの表示になります。
|
■#000000 ■#000033 ■#000066 ■#000099 ■#0000CC ■#0000FF |
■#003300 ■#003333 ■#003366 ■#003399 ■#0033CC ■#0033FF |
■#006600 ■#006633 ■#006666 ■#006699 ■#0066CC ■#0066FF |
■#009900 ■#009933 ■#009966 ■#009999 ■#0099CC ■#0099FF |
■#00CC00 ■#00CC33 ■#00CC66 ■#00CC99 ■#00CCCC ■#00CCFF |
■#00FF00 ■#00FF33 ■#00FF66 ■#00FF99 ■#00FFCC ■#00FFFF |
|
■#330000 ■#330033 ■#330066 ■#330099 ■#3300CC ■#3300FF |
■#333300 ■#333333 ■#333366 ■#333399 ■#3333CC ■#3333FF |
■#336600 ■#336633 ■#336666 ■#336699 ■#3366CC ■#3366FF |
■#339900 ■#339933 ■#339966 ■#339999 ■#3399CC ■#3399FF |
■#33CC00 ■#33CC33 ■#33CC66 ■#33CC99 ■#33CCCC ■#33CCFF |
■#33FF00 ■#33FF33 ■#33FF66 ■#33FF99 ■#33FFCC ■#33FFFF |
|
■#660000 ■#660033 ■#660066 ■#660099 ■#6600CC ■#6600FF |
■#663300 ■#663333 ■#663366 ■#663399 ■#6633CC ■#6633FF |
■#666600 ■#666633 ■#666666 ■#666699 ■#6666CC ■#6666FF |
■#669900 ■#669933 ■#669966 ■#669999 ■#6699CC ■#6699FF |
■#66CC00 ■#66CC33 ■#66CC66 ■#66CC99 ■#66CCCC ■#66CCFF |
■#66FF00 ■#66FF33 ■#66FF66 ■#66FF99 ■#66FFCC ■#66FFFF |
|
■#990000 ■#990033 ■#990066 ■#990099 ■#9900CC ■#9900FF |
■#993300 ■#993333 ■#993366 ■#993399 ■#9933CC ■#9933FF |
■#996600 ■#996633 ■#996666 ■#996699 ■#9966CC ■#9966FF |
■#999900 ■#999933 ■#999966 ■#999999 ■#9999CC ■#9999FF |
■#99CC00 ■#99CC33 ■#99CC66 ■#99CC99 ■#99CCCC ■#99CCFF |
■#99FF00 ■#99FF33 ■#99FF66 ■#99FF99 ■#99FFCC ■#99FFFF |
|
■#CC0000 ■#CC0033 ■#CC0066 ■#CC0099 ■#CC00CC ■#CC00FF |
■#CC3300 ■#CC3333 ■#CC3366 ■#CC3399 ■#CC33CC ■#CC33FF |
■#CC6600 ■#CC6633 ■#CC6666 ■#CC6699 ■#CC66CC ■#CC66FF |
■#CC9900 ■#CC9933 ■#CC9966 ■#CC9999 ■#CC99CC ■#CC99FF |
■#CCCC00 ■#CCCC33 ■#CCCC66 ■#CCCC99 ■#CCCCCC ■#CCCCFF |
■#CCFF00 ■#CCFF33 ■#CCFF66 ■#CCFF99 ■#CCFFCC ■#CCFFFF |
|
■#FF0000 ■#FF0033 ■#FF0066 ■#FF0099 ■#FF00CC ■#FF00FF |
■#FF3300 ■#FF3333 ■#FF3366 ■#FF3399 ■#FF33CC ■#FF33FF |
■#FF6600 ■#FF6633 ■#FF6666 ■#FF6699 ■#FF66CC ■#FF66FF |
■#FF9900 ■#FF9933 ■#FF9966 ■#FF9999 ■#FF99CC ■#FF99FF |
■#FFCC00 ■#FFCC33 ■#FFCC66 ■#FFCC99 ■#FFCCCC ■#FFCCFF |
■#FFFF00 ■#FFFF33 ■#FFFF66 ■#FFFF99 ■#FFFFCC ■#FFFFFF |
Netscape Navigatorでは、次のような色の名前を定義しました。Internet Explorer でもこれらの色は解釈できるようです。しかし、古いバージョンや、他のブラウザでは、これらの色の名前は解釈できないかもしれませんので、注意が必要です。
|
■ #000000 black ■ #000080 navy ■ #00008B darkblue ■ #0000CD mediumblue ■ #0000FF blue ■ #006400 darkgreen ■ #008000 green ■ #008080 teal ■ #008B8B darkcyan ■ #00BFFF deepskyblue ■ #00CED1 darkturquoise ■ #00FA9A mediumspringgreen ■ #00FF00 lime ■ #00FF7F springgreen ■ #00FFFF aqua ■ #00FFFF cyan ■ #191970 midnightblue ■ #1E90FF dodgerblue ■ #20B2AA lightseagreen ■ #228B22 forestgreen ■ #2E8B57 seagreen ■ #2F4F4F darkslategray ■ #32CD32 limegreen ■ #3CB371 mediumseagreen ■ #40E0D0 turquoise ■ #4169E1 royalblue ■ #4682B4 steelblue ■ #483D8B darkslateblue ■ #48D1CC mediumturquoise ■ #4B0082 indigo ■ #556B2F darkolivegreen ■ #5F9EA0 cadetblue ■ #6495ED cornflowerblue ■ #66CDAA mediumaquamarine ■ #696969 dimgray ■ #6A5ACD slateblue ■ #6B8E23 olivedrab ■ #708090 slategray ■ #778899 lightslategray ■ #7B68EE mediumslateblue ■ #7CFC00 lawngreen ■ #7FFF00 chartreuse ■ #7FFFD4 aquamarine ■ #800000 maroon ■ #800080 purple ■ #808000 olive ■ #808080 gray ■ #87CEEB skyblue ■ #87CEFA lightskyblue ■ #8A2BE2 blueviolet ■ #8B0000 darkred ■ #8B008B darkmagenta ■ #8B4513 saddlebrown ■ #8FBC8F darkseagreen ■ #90EE90 lightgreen ■ #9370DB mediumpurple ■ #9400D3 darkviolet ■ #98FB98 palegreen ■ #9932CC darkorchid ■ #9ACD32 yellowgreen ■ #A0522D sienna ■ #A52A2A brown ■ #A9A9A9 darkgray ■ #ADD8E6 lightblue ■ #ADFF2F greenyellow ■ #AFEEEE paleturquoise ■ #B0C4DE lightsteelblue ■ #B0E0E6 powderblue ■ #B22222 firebrick ■ #B8860B darkgoldenrod |
■ #BA55D3 mediumorchid ■ #BC8F8F rosybrown ■ #BDB76B darkkhaki ■ #C0C0C0 silver ■ #C71585 mediumvioletred ■ #CD5C5C indianred ■ #CD853F peru ■ #D2691E chocolate ■ #D2B48C tan ■ #D3D3D3 lightgrey ■ #D8BFD8 thistle ■ #DA70D6 orchid ■ #DAA520 goldenrod ■ #DB7093 palevioletred ■ #DC143C crimson ■ #DCDCDC gainsboro ■ #DDA0DD plum ■ #DEB887 burlywood ■ #E0FFFF lightcyan ■ #E6E6FA lavender ■ #E9967A darksalmon ■ #EE82EE violet ■ #EEE8AA palegoldenrod ■ #F08080 lightcoral ■ #F0E68C khaki ■ #F0F8FF aliceblue ■ #F0FFF0 honeydew ■ #F0FFFF azure ■ #F4A460 sandybrown ■ #F5DEB3 wheat ■ #F5F5DC beige ■ #F5F5F5 whitesmoke ■ #F5FFFA mintcream ■ #F8F8FF ghostwhite ■ #FA8072 salmon ■ #FAEBD7 antiquewhite ■ #FAF0E6 linen ■ #FAFAD2 lightgoldenrodyellow ■ #FDF5E6 oldlace ■ #FF0000 red ■ #FF00FF fuchsia ■ #FF00FF magenta ■ #FF1493 deeppink ■ #FF4500 orangered ■ #FF6347 tomato ■ #FF69B4 hotpink ■ #FF7F50 coral ■ #FF8C00 darkorange ■ #FFA07A lightsalmon ■ #FFA500 orange ■ #FFB6C1 lightpink ■ #FFC0CB pink ■ #FFD700 gold ■ #FFDAB9 peachpuff ■ #FFDEAD navajowhite ■ #FFE4B5 moccasin ■ #FFE4C4 bisque ■ #FFE4E1 mistyrose ■ #FFEBCD blanchedalmond ■ #FFEFD5 papayawhip ■ #FFF0F5 lavenderblush ■ #FFF5EE seashell ■ #FFF8DC cornsilk ■ #FFFACD lemonchiffon ■ #FFFAF0 floralwhite ■ #FFFAFA snow ■ #FFFF00 yellow ■ #FFFFE0 lightyellow ■ #FFFFF0 ivory ■ #FFFFFF white |
Netscape Navigatorでは aliceblue の実装にバグがあり、COLOR=aliceblue と COLOR=#F0F8FF の色が異なっていたそうですが、4.03(4.02?)あたりで修正されたそうです。
IE4.0やCSS2では、ユーザーが好みに応じて変更できる色として、以下の色の名前を定義しています。Windowsでは、これらは、[画面のプロパティ]の[デザイン]で変更することができます。しかし、これらの色は Netscape Navigator ではまったく違った色として解釈されてしまいます。
■ 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：ウィンドウ ■ windowfreme：ウィンドウのフレーム ■ windowtext：ウィンドウのテキスト
ブラウザが色を表示する時、フルカラーモードであれば問題ないのですが、256色モードの時などは、指定した色を、ブラウザの独自パレットの色に近似して表示します。そのため、自分の思っていた色ではない画像になってしまい、幻滅することがあります。
一度、256色モードで自分のホームページがどのように見えるのか、確認しておくことをオススメします。
Netscape Navigator も Internet Explorer も、基本16色パレット および 216色パレット を含む256色パレットに近似するので、この２つのパレットに含まれる色のみを用いて作成した画像は、256色モードでも、変化なく表示できます。
256色モードの場合、基本16色パレットと216色パレットでは合わせても232色にしかならない、残りの色はどうなるの？という疑問についてちょっと調べたり情報をいただいたりしました。（ただし、Windows 95の場合だけです）
基本16色と216色のうち、重複する色が8色あります。つまり、基本16色パレットと216色パレットを合わせても16＋216−8＝224色にしかなりません。残りは256−224＝32色となります。
このうち、4色はWindows 95では常に同じ色(#C0D0C0, #A6CAF0, #FFFBF0, #A0A0A4)を割り当てています。（たまにこれを変更してしまうアプリケーションもあるそうですが）
残りの28色については、Netscape NavigatorとInternet Explorerで若干実装が異なります。Netscape Navigatorでは、それまで他のアプリケーションが使用していた色の一部をそのまま残しています。Internet Explorerでは、グレースケール(白〜灰〜黒)と、何色かの中途半端な値の色を固定的に割り当てているようです。
<< PAGE TOP >>
独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
ＳＥＯ・月次更新・リニュアルetc
京都市中京区橋弁慶町222番地
ヒライビル3階
