勉強会資料
このページは熊本シニアネットの勉強会用として作成したものです
ご自由にお持ち帰りください  
 知って得する話 第三弾
ホームページの裏技 第3話
続CSSの概要
文字に色を付けるには、colorプロパティで設定します。値を指定する方法は、光の3原則と呼ばれる 赤(R) 緑(G)
青(B) の組み合わせの割合で色を指定する方法と、色名を表すキーワードで指定する方法があります。
ここでは、RGB の割合で示す方法指定してみます。
「#FF0000」 と指定すると赤を示します。
<HTML>
<HEAD>
<TITLE>文字色</TITLE>
<STYLE type = "text/css">
<!--
.red{color : #FF0000}    (赤を指定しています)
-->
</STYLE>
</HEAD>
<BODY>
<H1 class = "red">ようこそ</H1>
</BODY>
</HTML>
ようこそ  の文字が赤くなります。

ここでは、文字色を赤にするクラス名を「red」としていますが、この文字列自体は半角英数字であればよく、「a」「b」
など1文字のクラス名や、極端なことを言えば「blue」としても効果に変わりはありません。しかし、このようなクラス名を
指定してしまうと、あとで混乱しかねないので、わかりやすいクラス名を付けるようにしましょう。

16進法とは
われわれが普段用いている数は 0 から 9 までの10個の数字で表す10進法ですが、16進法とは、 0 〜 9 に加えて A 〜 F までの6つの記号を加えた 16個 の記号で数を表す方式です。
(Aは、10進法での10を表し、Fは、10進法の15を表し、10は、10進法の16を表し、11は、10進法の17を表す)

16進法による色指定
16進数で色を指定するときは、赤(R) 緑(G) 青(B) の各要素を、この順番でそれぞれ2桁の16進数で表します
最小は 「00」(10進数での「0」)、最大は、「FF」(10進数での「255」となります。
したがって「FF0000」は赤の要素が最大、緑と青の要素が最小であることを示し、赤色を指定しているというわけです
16進数で指定するときは先頭に「#」を付けて指定します。

color : #FF0000   (赤の要素最大、緑の要素最小、青の要素最小)・・・・赤
color : #00FF00   (赤の要素最小、緑の要素最大、青の要素最小)・・・・緑
color : #0000FF   (赤の要素最小、緑の要素最小、青の要素最大)・・・・青

キーワードによる指定
16進法で指定する変わりに、16色については、色を表す英単語をキーワードとして指定することも出来ます。例えば赤を指定するときは「color : red」となります。
お話箱へ戻る