色を変えてみたりする

バジル観察記

3月12日　バジルを貰った

モスバーガーに出かけたら、12周年記念ということで小さなバジル育成キットが配られていました。

貰って帰って説明書を読むと、発芽させるにはまだ少し寒い季節なのかもしれなかったのですけれど、部屋の中だから暦通りの気候より暖かいかもしれないと考えて、さっそく育て始めることにしました。

前回の「見出しと段落がある文章をマーク付けしてみる」で作ったHTMLファイルを、ブラウザで開いてみると、およそこのようなイメージになっていることと思います。

表示様式に関する特別な指定がない場合、ブラウザは、メーカーが標準として用意した様式で表示します。また、ページの作者が指定していなくとも、読者が自分のブラウザに対して標準表示設定を変えている場合もあります。

文字と背景の色を変えてみる

次の例では、前回のHTML文書のhead要素にstyle要素を加え、内容として「body要素に含まれる全ての文字の色を緑、背景をシルバー（薄い灰色）にする」指定を、スタイル言語「CSS」の書き方で記しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>

<head>
<title>バジル観察記</title>
<style type="text/css">
<!--
body {
    color: green;
    background: silver;
}
-->
</style>

</head>
<body>

　　　　　　　　　<h1>バジル観察記</h1>

<h2>3月12日　バジルを貰った</h2>

<p>モスバーガーに出かけたら、12周年記念ということで小さなバジル
育成キットが配られていました。</p>

<p>
貰って帰って説明書を読むと、発芽させるにはまだ少し寒い季節な
のかもしれなかったのですけれど、部屋の中だから暦通りの気候よ
り暖かいかもしれないと考えて、さっそく育て始めることにしまし
た。
</p>

</body>
</html>

バジル観察記

3月12日　バジルを貰った

モスバーガーに出かけたら、12周年記念ということで小さなバジル育成キットが配られていました。

CSS 1.0 仕様では、この例のように名前で指定できる色が16色用意されています。アルファベット順に、「aqua」、「black」、「blue」、「fuchsia」、「gray」、「green」、「lime」、「maroon」、「navy」、「olive」、「purple」、「red」、「silver」、「teal」、「white」、「yellow」、です。

今回の例のように、CSSでは、

対象 {
    の何々1を: これこれにする;
    の何々2を: これこれにする;
}

あるいは1行にまとめて、

対象 {の何々1を: これこれにする; の何々2を: これこれにする;}

――というような書き方をします。そこで、body要素の全ての文字の色と背景を「緑地に白文字」に指定した上で、大見出しであるh1要素の文字は赤文字にしたい、……というような指定は、次のようになります。

<style type="text/css">
<--
body {color: white; background: green;}
h1 {color: red;}
-->
</style>

光の三原色と色指定

カラーディスプレイの色情報は、より一般的には光の三原色である「赤(Red)・緑(Green)・青(Blue)」の、各々の光の強さを組み合わせて表します。例えば赤色の場合「赤の光が100%で緑と青の光が0%」の足し算となります。

CSSでは、この強さの組み合わせを次のように表します。

百分率

{color: rgb(100%, 0%, 0%);}

各原色の強さを、0.0%から100.0%までの範囲で指定します。

整数値

{color: rgb(255, 0, 0);}

各原色の強さを、0から255まで256段階の整数値で指定します。

2桁の16進数値

{color: #ff0000;}

各原色の強さを、0からfまでの16進数で (0,1,2,...,8,9,a,b,c,d,e,f) 2桁の値で指定します。赤、緑、青の順で2桁ずつを用い、各色が256段階の値を取り得ます。

1桁の16進数値

{color: #f00;}

各原色の強さを、赤、緑、青の順で、16進数の1桁の値で指定します。各色が16段階の値を取り得ます。

紙の上での絵の具の混色と違って、3つの色の総和が白、3つの色が0だと黒だ、ということに注意して下さい。

どうして「この要素が何であるか」と「どう表示させたいか」を分けて考えるのか

例えば見出しを大きい文字で表示したいと考える場合、これは「見出しだから目立つようにしたい」のであって、「見出しだから大きくしたい」とだけ考えているわけではないでしょう。

例えば非常に小さい表示面積しか持っていない携帯機器などに文章を表示する場合、「文字の大きさ」以外の手段で「見出しであること」が目立たせられるようであれば便利です。

文章を構成する要素の多くは、『「この要素が何であるか」を「どのように表現するか」ということが出力媒体に依存している』（紙に印刷する時の表現と、画面に表示する時の表現と、音声で読み上げる時の表現と、……、は異なる）と考えられますので、一見不便なように見えて、実は「この要素が何であるか」ということと「どう表示させたいか」を分けておいたほうが便利なのです。

とりあえず、このテキストでは、わたしたちがよく使っている Microsoft Internet Explorer や Mozilla 0.x などのWWWブラウザで眺めることを前提にして話を進めて行きますが、「文章は、HTML化すると色々な環境で読んでもらえるのだ」ということを、頭の片隅に入れておいてください。