ホームページを自作しよう≪JoyWave便利箱≫
ジョイのHTML勉強 ホームページを自作しよう≪JoyWave便利箱≫
ジョイのHTMLソース勉強部屋
制作:ジョイ@関西

 トップ | ≪HTML基本構成≫ | ≪タグの書き方≫ | ≪スタイルシートの書き方≫ | HTMLタグ・属性 abc順 | ≪サイトマップ≫


パソコンモニターなどの環境によって色合い(見え方)が異なります。なので、あまり微妙な色にこだわらないように注意しましょう。

◇色コード・色名

色コードを勉強します。
「#RRGGBB」は「RR」+「GG」+「BB」で組み合わされ、「R」は赤、「G」は緑、「B」は青を表します。
それぞれ 0〜255 の256種類、これを16進数で書きます。
つまり 0〜255 は、00〜ff で表示され、「00」弱い色、「ff」強い色になります。
これを『光の三原色』で組み合わせると、約1,677万色の色ができます。

色指定の仕方
文字の色:属性で指定します。 color="white"、color="#ffffff" など
背景の色:属性で指定します。 bgcolor="white"、bgcolor="#ffffff" など

・・進数について≪参考≫

私たちが日常的に使うのは10進数。0,1,2,3,4,5,6,7,8,9 の10個でできています。
9 の上は「10」と桁が上がります。
コンピューターの世界では2進数。0,1 だけです。
1 の上は「10」と桁が上がります。
色コードは16進数。0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f の16個を使います。
f の上は「10」と桁が上がります。

≪参考1≫明るさ・暗さ
系統 光が強い 光が弱い
白−黒 #ffffff
#eeeeee #cccccc #999999 #666666 #333333 #000000
赤系 #ffeeee #ffaaaa #ff6666 #ff0000
#cc0000 #990000 #660000
緑系 #ddffdd #99ff99 #33ff33 #00cc00 #008000
#006600 #003300
青系 #eeeeff #aaaaff #6666ff #0000ff
#0000aa #000066 #000033

≪参考2≫微妙な色の変化
  #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

ブラウザで名前が定義されている色見本(カラーサンプル)
表中上段の色名で指定できます。

≪参考3≫ブラウザで名前が定義されている140色
black
#000000
aliceblue
#f0f8ff
darkcyan
#008b8b
lightyellow
#ffffe0
coral
#ff7f50
dimgray
#696969
lavender
#e6e6fa
teal
#008080
lightgoldenrodyellow
#fafad2
tomato
#ff6347
gray
#808080
lightsteelblue
#b0c4de
darkslategray
#2f4f4f
lemonchiffon
#fffacd
orangered
#ff4500
darkgray
#a9a9a9
lightslategray
#778899
darkgreen
#006400
wheat
#f5deb3
red
#ff0000
silver
#c0c0c0
slategray
#708090
green
#008000
burlywood
#deb887
crimson
#dc143c
lightgrey
#d3d3d3
steelblue
#4682b4
forestgreen
#228b22
tan
#d2b48c
mediumvioletred
#c71585
gainsboro
#dcdcdc
royalblue
#4169e1
seagreen
#2e8b57
khaki
#f0e68c
deeppink
#ff1493
whitesmoke
#f5f5f5
midnightblue
#191970
mediumseagreen
#3cb371
yellow
#ffff00
hotpink
#ff69b4
white
#ffffff
navy
#000080
mediumaquamarine
#66cdaa
gold
#ffd700
palevioletred
#db7093
snow
#fffafa
darkblue
#00008b
darkseagreen
#8fbc8f
orange
#ffa500
pink
#ffc0cb
ghostwhite
#f8f8ff
mediumblue
#0000cd
aquamarine
#7fffd4
sandybrown
#f4a460
lightpink
#ffb6c1
floralwhite
#fffaf0
blue
#0000ff
palegreen
#98fb98
darkorange
#ff8c00
thistle
#d8bfd8
linen
#faf0e6
dodgerblue
#1e90ff
lightgreen
#90ee90
goldenrod
#daa520
magenta
#ff00ff
antiquewhite
#faebd7
cornflowerblue
#6495ed
springgreen
#00ff7f
peru
#cd853f
fuchsia
#ff00ff
papayawhip
#ffefd5
deepskyblue
#00bfff
mediumspringgreen
#00fa9a
darkgoldenrod
#b8860b
violet
#ee82ee
blanchedalmond
#ffebcd
lightskyblue
#87cefa
lawngreen
#7cfc00
chocolate
#d2691e
plum
#dda0dd
bisque
#ffe4c4
skyblue
#87ceeb
chartreuse
#7fff00
sienna
#a0522d
orchid
#da70d6
moccasin
#ffe4b5
lightblue
#add8e6
greenyellow
#adff2f
saddlebrown
#8b4513
mediumorchid
#ba55d3
navajowhite
#ffdead
powderblue
#b0e0e6
lime
#00ff00
maroon
#800000
darkorchid
#9932cc
peachpuff
#ffdab9
paleturquoise
#afeeee
limegreen
#32cd32
darkred
#8b0000
darkviolet
#9400d3
mistyrose
#ffe4e1
lightcyan
#e0ffff
yellowgreen
#9acd32
brown
#a52a2a
darkmagenta
#8b008b
lavenderblush
#fff0f5
cyan
#00ffff
darkolivegreen
#556b2f
firebrick
#b22222
purple
#800080
seashell
#fff5ee
aqua
#00ffff
olivedrab
#6b8e23
indianred
#cd5c5c
indigo
#4b0082
oldlace
#fdf5e6
turquoise
#40e0d0
olive
#808000
rosybrown
#bc8f8f
darkslateblue
#483d8b
ivory
#fffff0
mediumturquoise
#48d1cc
darkkhaki
#bdb76b
darksalmon
#e9967a
blueviolet
#8a2be2
honeydew
#f0fff0
darkturquoise
#00ced1
palegoldenrod
#eee8aa
lightcoral
#f08080
mediumpurple
#9370db
mintcream
#f5fffa
lightseagreen
#20b2aa
cornsilk
#fff8dc
salmon
#fa8072
slateblue
#6a5acd
azure
#f0ffff
cadetblue
#5f9ea0
beige
#f5f5dc
lightsalmon
#ffa07a
mediumslateblue
#7b68ee

≪参考3≫は WEB色見本 原色大辞典 - HTML Color Names 様より拝借しました。


ページの先頭へ


 トップ | ≪HTML基本構成≫ | ≪タグの書き方≫ | ≪スタイルシートの書き方≫ | HTMLタグ・属性 abc順 | ≪サイトマップ≫

Copyright(C) 2005 ホームページを自作しよう≪JoyWave便利箱≫ All Rights Reserved.