■ CSS における色の指定方法
HTML で色を指定する場合は、<font color="値">、<〜 bgcolor="値"> などカラー属性（プロパティ）を持つタグの値として、#rrggbbまたはカラーネームを指定します。
CSS ではこの他に３種類の指定方法がありますが、たくさん覚えてもしょうがないので、どれか一種類自分のやりやすい方法を覚えておきましょう。
１．#rrggbb
赤(red)、緑(green)、青(blue)の３色をそれぞれ00〜ffの１６進数６桁で表す方法です。
２．カラーネーム
色の名前で指定する方法です。後から見たとき一番わかりやすいですね。
カラーネームが決まっている色は指定できますが、それ以外の細かい指定ができません。
３．#rgb
#rrggbb のそれぞれの色の２桁を１桁で表します。
#ff0000→#f00、#ff00ff→#f0f といった感じです。
４．rgb(n,n,n)
赤(red)、緑(green)、青(blue)の３色をそれぞれ0〜255の１０進数で表す方法です。
00〜ffの１６進数を１０進数に直すと0〜255になります。
５．rgb(n%,n%,n%)
赤(red)、緑(green)、青(blue)の３色をそれぞれパーセントで表す方法です。
１０進法の0→0%、255→100%となります。
| 色 | #rrggbb | color | #rgb | rgb(n,n,n) | rgb(n%,n%,n%) |
| ! | #000000 | black | #000 | rgb(0,0,0) | rgb(0%,0%,0%) |
| ! | #ff0000 | red | #f00 | rgb(255,0,0) | rgb(100%,0%,0%) |
| ! | #00ff00 | lime | #0f0 | rgb(0,255,0) | rgb(0%,100%,0%) |
| ! | #0000ff | blue | #00f | rgb(0,0,255) | rgb(0%,0%,100%) |
| ! | #ffff00 | yellow | #ff0 | rgb(255,255,0) | rgb(100%,100%,0%) |
| ! | #00ffff | aqua | #0ff | rgb(0,255,255) | rgb(0%,100%,100%) |
| ! | #ff00ff | fuchsia | #f0f | rgb(255,0,255) | rgb(100%,0%,100%) |
| hamasaki | #ffffff | white | #fff | rgb(255,255,255) | rgb(100%,100%,100%) |
◆色を設定する
| プロパティ | 値 | 説明 |
| color | #rrggbb | rr、gg、bb は 00〜ff |
| カラーネーム | red、green、blue など |
| #rgb | r、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
色の設定については、いままでの説明の中でも何回も出てきたから説明はいらないよね。
文字色だけじゃなく、ほかのカラー属性を持つタグにも使えます。
上の例ではオレンジ色の罫線を引いていますね。
|
