テキストのカラーを指定する属性　color

今度はテキストのカラーを変える方法について調べましょう。
テキストのカラーを適用するために使うCSSの属性はcolorです。

color属性の使い方

セレクター{color:バリュー}

バリューには指定したいカラーの名を書きます。
ホットピンク色を使うなら次のよう、指定します。

セレクター{color:hotpink}

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::coreasur - テキストの大きさを調節しよう！</title>
<style>
p{color:hotpink}
</style>
</head>
<body>
    <p>Welcome to coreasur</p>
</body>
</html>

結果

バリューでhotpinkとかblue,red,yellow以外にも使える色のバリューがあります。 rgbの色があるんですけど、rはレッド、gはグリン、bはブルーです。

rgb色の使い方

rgbのバリューでrのバリュー、rのバリュー、bのバリューを客指定します。指定するバリューは0から255までです。

セレクター{color:rgb(0,0,0)}

セレクター{color:rgb(rのバリュー,gのバリュー,bのバリュー)}

上の例で赤の色の表示したい時は、rのバリューだけ255を書いて他のバリューは０にします。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::coreasur - テキストの大きさを調節しよう！</title>
<style>
p{color:rgb(255,0,0)}
</style>
</head>
<body>
    <p>Welcome to coreasur</p>
</body>
</html>

結果

グリンの色だけを表示する時には

セレクター{color:rgb(0,255,0)}

ブルーの色だけを表示する時には

セレクター{color:rgb(0,0,255)}

客三つのバリューをいろいろ指定して、いろいろのカラーを作ることが出来ます。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::coreasur - テキストの大きさを調節しよう！</title>
<style>
p{color:rgb(50,255,10)}
</style>
</head>
<body>
    <p>Welcome to coreasur</p>
</body>
</html>

結果

そして次の一つは16進数です。
人は普通に0から9まで数える10真数を使いますが、パソコンは１６進数も使います。0から15まで数えます。
でも全部数字で書けば理解しにくいんで、10からはアルパベットのAから始めます。

数字	１６進数
0	0
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
10	A
11	B
12	C
13	D
14	E
15	F

16進数を色として使い方

16進数の構成は次となります。

セレクター{color:#000000}

まず#(sharp)を書いてから６個の数字を書きます。
最初の数字２個はレッド、次の２個はグリン、次の２個はブルーです。
なので赤色を表示する時は次のように使います。

セレクター{color:#ff0000}

例で本当に赤になるのか確認して見ましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::coreasur - テキストの色！</title>
<style>
p{color:#ff0000}
</style>
</head>
<body>
    <p>Welcome to coreasur</p>
</body>
</html>

結果

色をグリンにしたい時は。。

セレクター{color:#00ff00}