超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ CSS における色の指定方法

HTML で色を指定する場合は、<font color="値">、<〜 bgcolor="値"> などカラー属性(プロパティ)を持つタグの値として、#rrggbbまたはカラーネームを指定します。
CSS ではこの他に3種類の指定方法がありますが、たくさん覚えてもしょうがないので、どれか一種類自分のやりやすい方法を覚えておきましょう。

1.#rrggbb

赤(red)、緑(green)、青(blue)の3色をそれぞれ00〜ffの16進数6桁で表す方法です。

2.カラーネーム

色の名前で指定する方法です。後から見たとき一番わかりやすいですね。
カラーネームが決まっている色は指定できますが、それ以外の細かい指定ができません。

3.#rgb

#rrggbb のそれぞれの色の2桁を1桁で表します。
#ff0000→#f00、#ff00ff→#f0f といった感じです。

4.rgb(n,n,n)

赤(red)、緑(green)、青(blue)の3色をそれぞれ0〜255の10進数で表す方法です。
00〜ffの16進数を10進数に直すと0〜255になります。

5.rgb(n%,n%,n%)

赤(red)、緑(green)、青(blue)の3色をそれぞれパーセントで表す方法です。
10進法の0→0%、255→100%となります。

#rrggbbcolor#rgbrgb(n,n,n)rgb(n%,n%,n%)
!#000000black#000rgb(0,0,0)rgb(0%,0%,0%)
!#ff0000red#f00rgb(255,0,0)rgb(100%,0%,0%)
!#00ff00lime#0f0rgb(0,255,0)rgb(0%,100%,0%)
!#0000ffblue#00frgb(0,0,255)rgb(0%,0%,100%)
!#ffff00yellow#ff0rgb(255,255,0)rgb(100%,100%,0%)
!#00ffffaqua#0ffrgb(0,255,255)rgb(0%,100%,100%)
!#ff00fffuchsia#f0frgb(255,0,255)rgb(100%,0%,100%)
hamasaki#ffffffwhite#fffrgb(255,255,255)rgb(100%,100%,100%)


◆色を設定する

プロパティ説明
color#rrggbbrr、gg、bb は 00〜ff
カラーネームred、green、blue など
#rgbr、g、b は 0〜f
rgb(n,n,n)n は 0〜255
rgb(n%,n%,n%)n は 0〜100

(css file)
div{ color:#800080; }
span{ color:#f00; }
hr{ color:orange; }

(html file)
<div>
A Song for ×× <span>"MILLENNIUM MIX"</span> from 1st Album
</div>
<hr>

A Song for ×× "MILLENNIUM MIX" from 1st Album

色の設定については、いままでの説明の中でも何回も出てきたから説明はいらないよね。
文字色だけじゃなく、ほかのカラー属性を持つタグにも使えます。
上の例ではオレンジ色の罫線を引いていますね。


 Home < 超初心者のためのスタイルシート講座 < Back < 色の指定方法 > Next