ウェブ木箱：HTML講座-背景や文字の色を指定してみよう

色の数ってのはほぼ無数にあるよね。そのすべてに名前をつけて判別していたのでは大変。そこでHTMLで色を表すにはRGB値と呼ばれる値を使うよ。これはRed,Green,blueの略で光の３原色である赤、緑、青の比率を表したもの。 #(シャープ)で始める６桁の１６進数で表されるよ。例えば上の枠線の色なら#3abc42っといった感じ。 RGB値について全部はとても紹介できないのでこの講座ではカラーエディタを用意したのでそれを使って色を作ってね。

この他にも決められた１４０色に関してはredやbuleなど、馴染みのある色名で指定することも可能だよ。

色の指定の仕方は理解できたかな？次はページの背景色の指定をしよう。背景色を指定するには新しいタグは使わない。すでに紹介した<body>に属性を付けるんだ。属性とはタグに付ける付加情報のようなもので、例えば<body>だけだと『ここからが本文』という意味しかないけど属性を付けることによって『ここからが本文、背景色は水色』のように指定することができる。

背景色を指定する属性名はbgcolorだよ。

これをどう使うかというと、属性は通常『属性名="属性値"』の形をとる。この場合の属性名は今紹介したbgcolor、属性値は色の指定なので RGB値という事になるね。ここでは薄い青(#eeeeff)を使ってみよう。属性値の方は必ず"(ダブルクオーテーション)または'(シングルクオーテーション)で囲むようにしよう。これをその形にあてはめてみると・・・

っとなるね。これを<body>の中に１つ以上の半角スペースで区切って書き加えればいいんだ。半角スペースの他にもソースでの改行(<br>ではなく)やTabなども半角スペースと見なされるので区切るのに使えるよ。属性を付けるのは開始タグだけで終了タグにはいらないよ。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body bgcolor="#eeeeff">
カツ丼定食・・・？<br>
ってことはカツ丼をおかずに<br>
ご飯と味噌汁が付いてくるのか？(≡д≡)
</body>
</html>

もし色が変らない場合(日頃からどのページを観ても同じ背景色の場合)はブラウザの設定で色を決めてしまっている場合があるので設定を変更してから確認してね。

腹減り日誌♪ -

カツ丼定食・・・？
ってことはカツ丼をおかずに
ご飯と味噌汁が付いてくるのか？(≡д≡)

＊ブラウザでの表示はこちら(別ウィンドウ)

今度は文字色を指定してみよう。これも背景色同様に<body>に属性を付けて指定するよ。

文字色を指定する属性名はtextだよ。

今回は文字色を背景と同系色の#6666ffに指定してみよう。複数の属性を付ける時も半角スペースで区切ればいい。ソースが横に長くなってしまう時は、半角スペースの代わりに改行を入れてもいいんだったよね。この辺は個人の好みだけど、観やすいようにソースを書こう。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body bgcolor="#eeeeff"
text="#6666ff">
カツ丼定食・・・？<br>
ってことはカツ丼をおかずに<br>
ご飯と味噌汁が付いてくるのか？(≡д≡)
</body>
</html>


		半角スペースの代わりに改行を区切りにしてあるよ。

腹減り日誌♪ -

カツ丼定食・・・？
ってことはカツ丼をおかずに
ご飯と味噌汁が付いてくるのか？(≡д≡)

＊ブラウザでの表示はこちら(別ウィンドウ)

ではここで属性を書く時の決まりをまとめておくね。

１．	属性名は半角文字で書く

属性名だけじゃなくその間の=(イコール)とか"ももちろん半角。属性値の方は場合によっては全角文字を使うこともあるけどね。初心者の人はタグの時でも説明したけどテキストエディタの表示フォントをＭＳゴシックなどの等角フォントにすることをお勧め。

２．	属性名は小文字で書く

これもタグ同様、今現在の仕様では大文字でも小文字でもいいことになってる。次期バージョンでは小文字に統一される予定なのでここでは小文字を勧めているよ。

３．	属性値は"または'で囲む

これも今現在の仕様と次期バージョンの仕様が異なるところなんだけど、今の仕様では、属性値が半角英数及び一部の半角記号のみの場合は囲まなくてもいいことにはなっている。でも次期バージョンでは必ず囲むことになる点や囲み忘れを防ぐ意味でも必ず囲むようにした方がいいと思うよ。

４．	属性を書き込む時は半角スペースで区切る

これは本文中で何度も説明した通り。半角スペースの他にも改行やTabでも可だったね。念のため・・・属性名やタグ名の途中にスペースを入れたりだとか <とタグ名の間にスペースを入れるのはダメだよ。

文字色や背景色の指定がない場合は、観ている人のブラウザの設定で色が決まる。これを利用して敢えて色を指定しないで観ている人の好みの色で観られるようにするのも１つの方法だろうね。でも文字色か背景色のいずれかを指定する場合は、もう一方の色も必ず指定するようにしよう。例えば文字色を黒っぽい色に指定したとして背景色は指定しなかったとする。そうするとブラウザの設定で背景色が白系統の色ならば何の問題もなく文字が見えるけど黒系に設定されていたら文字と似た色になって文字が見えにくい状態になってしまうからね。

腹減り日誌♪ -

カツ丼定食・・・？
ってことはカツ丼をおかずに
ご飯と味噌汁が付いてくるのか？(≡д≡)


		文字色と背景色が同じになっちゃって読めない状態。

	次は部分的な文字の大きさや色の指定だよ。次へ→
	前回は表示される文字を書いてみたね。 ←前へ

	ページ編－２
	HTML講座第７回

		HTMLでの色の表し方

		背景色を指定しよう

		文字色を指定しよう