happy cat image

tomodevel

皆んなのウェブ入門, ともでぃべる

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

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

color属性の使い方

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

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

セレクター{color:hotpink}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::tomodevel - テキストの大きさを調節しよう!</title>
<style>
p{color:hotpink}
</style>
</head>
<body>
    <p>Welcome to Beanscent</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を書いて他のバリューは0にします。

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

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

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

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

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

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

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

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

数字 16進数
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)を書いてから6個の数字を書きます。
最初の数字2個はレッド、次の2個はグリン、次の2個はブルーです。
なので赤色を表示する時は次のように使います。

セレクター{color:#ff0000}

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

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

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

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

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

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

次はテキストにいろいろのスタイルを指定する方法について調べましょう。

講座に戻り