So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

カラー(色)について [基礎編]

カラーの指定方法
カラーの指定方法は、大きく分けて二つの方法があります。ひとつは色名を指定する方法、もうひとつはRGB(R:red、G:green、B:blue)で指定する方法です。しかし、色名で指定する方法は定義されている16色以外はブラウザ、システムによって色合いが異なる場合があるため、スタイルシートではRGBで指定します。

さらにRGBで指定する方法は四つあります。
・#rrggbb
 【例】赤:#FF0000
・#rgb
 【例】赤:#F00
・rgb(n,n,n)
 【例】赤:rgb(255,0,0)
・rgb(n%,n%,n%)
 【例】赤:rgb(100%,0%,0%)

これらの方法のうち、#rrggbbの指定方法を使ってカラーを指定していくことにします。
rr, gg, bbは二桁の16進数を表し、00〜FFの数値が当てはまります。

しかし色を16進数でどう表して良いかわからない、そういう方は次のカラーサンプルを参考にしてください。

カラーサンプル
サンプル内の色名は参考までに載せています。
また、16進数のA〜Fは大文字でも小文字でも構いません。

gold:#FFD700 silver:#C0C0C0
red:#FF0000 green:#008000
blue:#0000FF beige:#F5F5DC
bisque:#FFE4C4 black:#000000
blanchedalmond:#FFEBCD azure:#F0FFFF
blueviolet:#8A2BE2 brown:#A52A2A
burlywood:#DEB887 cadetblue:#5F9EA0
chartreuse:#7FFF00 chocolate:#D2691E
coral:#FF7F50 cornflowerblue:#6495ED
cornsilk#FFF8DC crimson:#DC143C
cyan:#00FFFF darkblue:#00008B
darkcyan:#008B8B darkgoldenrod:#B8860B
darkgreen:#006400 darkgray:#A9A9A9
darkkhaki:#BDB76B darkmagenta:#8B008B
darkolivegreen:#556B2F darkorange:#FF8C00
darkorchid:#9932CC darkred:#8B0000
darksalmon:#E9967A darkseagreen:#8FBC8F
darkslateblue:#483D8B darkslategray:#00CED1
darkturquoise:#FFE4C4 darkviolet:#9400D3
deeppink:#FF1493 deepskyblue:#00BFFF
dimgray:#696969 dodgerblue:#1E90FF
firebrick:#B22222 floralwhite:#FFFAF0
forestgreen:#228B22 fuchsia:#FF00FF
gainsboro:#DCDCDC ghostwhite :#F8F8FF
aliceblue:#F0F8FF goldenrod:#DAA520
gray:#808080 aquamarine:#7FFFD4
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 mediumseagreen:#3CB371
mediumslateblue:#7B68EE mediumspringgreen:#00FA9A
mediumturquoise:#48D1CC mediumvioletred:#C71585
midnightblue:#191970 mintcream:#F5FFFA
mistyrose:#FFE4E1 moccasin:#FFE4B5
navajowhite:#FFDEAD navy:#000080
oldlace:#FDF5E6 olive:#808000
olivedrab:#6B8E23 orange:#FFA500
oranegred:#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 aqua:#00FFFF
royalblue:#4169E1 rosybrown:#BC8F8F
saddlebrown:#8B4513 salmon:#FA8072
sandybrown:#F4A460 sienna:#A0522D
seagreen:#2E8B57 seashell:#FFF5EE
antiquewhite:#FAEBD7 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


カラーサンプル(マニュアル設定)

ココの背景色が変わります

R:
G:
B:
#

【 使い方 】
R、G、Bそれぞれのエリアの[▲][▼]ボタンを押すか、テキスト領域に6桁の16進数(0〜9、A〜F、a〜fの半角英数字)を入力して[変更]ボタンを押してください。その上にあるボックス領域の背景色が変化します。好みの色になりましたら、テキスト領域の値をコピーしてお使いください。

【 注意事項 】
JavaScriptを使っています。本機能を使用する場合は、ブラウザのJavaScriptをONにしてください。
尚、お使いのPC環境によっては正しく動作しない場合があります。ご了承ください。


nice!(1)  コメント(2) 
共通テーマ:ペット

nice! 1

コメント 2

GOMIMA

カラーサンプル・・・
凄いです♪♪
by GOMIMA (2008-06-19 11:27) 

かほりん

* GOMIMAさん *

なんの役にも立たないかもしれないけど、力作です。(^^;;
by かほりん (2008-06-19 12:13) 

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。