2015/6/18
♕ 色を指定する方法
（１） カラーネーム（色名）
（２） RGB値
1
2015/6/18
（１） カラーネーム（色名）
特徴
・ 色の名前で指定する。 （ex） blue , red , yellow , green etc.
メリット
・ 後からソースを見たときにわかりやすい。
デメリット
・ 色名が決まってるものは指定できるが、細かい設定ができない。
（１） カラーネーム（色名）
・ 色を設定するときに使うタグ
ｈ１｛ color: “ 色の名前 ”｝
（ex） blue , red , yellow , green etc.
2
2015/6/18
（１） カラーネーム（色名）
【ソース】
【結果】
（２） ＲＧＢ値
特徴
・ 赤(red)、青(blue)、緑(green)の3色を使って色を指定する。
・ 指定する方法が4つある。
メリット
・ 色の濃淡や明暗を細かく設定できる。
デメリット
・ カラーコードを使用するため、ソースを見た時に判断しづらい。
3
2015/6/18
（２） ＲＧＢ値
１. #ｒｒｇｇｂｂ
２. #ｒｇｂ
３. #ｒｇｂ（ｎ , ｎ , ｎ）
４. #ｒｇｂ（ｎ％ , ｎ％ , ｎ％）
（２） ＲＧＢ値 １
１．#ｒｒｇｇｂｂ
・ ＲＧＢを１６進数で2ケタずつ使って表す方法。
・ これは普段使っている16進数カラーコードと同じ。
ｈ１｛ color: “ #rrggbb ”｝
4
2015/6/18
（２） ＲＧＢ値 １
１．#ｒｒｇｇｂｂ
なぜ１６進数になるか？
０～９とａ～ｆで１６個使うから。これを６ケタ使うので
１６×１６×１６×１６×１６×１６＝16,777,216 通りとなる。
（２） ＲＧＢ値 １
１．#ｒｒｇｇｂｂ
（暗い） ００ → → → ｆｆ （明るい）
（ex） #000000 → 黒
#ｆｆｆｆｆｆ → 白
5
2015/6/18
（２） ＲＧＢ値 １
【ソース】
【結果】
（２） ＲＧＢ値 ２
２．#ｒｇｂ
・ （１）の６ケタの値を３ケタ省略して表す方法。
（ex） #ｒｒｇｇｂｂ → #ｒｇｂ （色自体は同じ）
ｈ1｛ color: “ #rgb ”｝
6
2015/6/18
（２） ＲＧＢ値 ２
【ソース】
【結果】
（２） ＲＧＢ値 ３
３．#ｒｇｂ（n , n , n）
・ ＲＧＢのそれぞれの値を０～２５５の１０進数を使って表す方法。
⇒００～ｆｆの１６進数を１０進数に直すと０～２５５になる。
・ “ , ”(カンマ)区切りで指定する。
ｈ1｛ color: “ #rgb（n , n , n） ”｝
7
2015/6/18
（２） ＲＧＢ値 ３
３．#ｒｇｂ（n , n , n）
（暗い） ０ → → → ２５５ （明るい）
（ex） rgb(255 , 0 , 0) → 赤
rgb(255 , 255 , 0) → 黄色
（２） ＲＧＢ値 ３
【ソース】
【結果】
8
2015/6/18
（２） ＲＧＢ値 ４
４．#ｒｇｂ（n% , n% , n%）
・ ＲＧＢのそれぞれの値をパーセントを使って表す方法。
・ （３）の１０進数をパーセントで表すと、
０→０、２５５→１００％ということになる。
ｈ1｛ color: “ #rgb（n% , n% , n%） ”｝
（２） ＲＧＢ値 ４
【ソース】
【結果】
9
2015/6/18
♕ 参考文献
・ 色を指定する方法 －ゼロからはじめるホームページ講座－
（http://0karahp.style-mods.net/html/html11.htm）
・ やさしいホームページ入門 －ＣＳＳでの色の指定方法－
（http://www.ink.or.jp/~bigblock/css/color.html）
・ 超初心者のためのホームページ作成講座 －色を指定する方法－
（http://park16.wakwak.com/~html-css/color/colormethod.html）
・ 色名サンプル（http://0karahp.style-mods.net/color/colorname.htm）
・ ＨＴＭＬとＣＳＳで基礎から学ぶＷｅｂデザイン
著 ： 園田 誠
10