HTML LECTURE



  スタイルシートでの文字色と背景指定。

BODYタグの属性で文字色や背景色を指定する事は
スタイルシートを使用する事で代用出来る為、
最近ではこちらが推奨されています。



  スタイルシートでの文字色と背景色の指定

ヘッダ内にSTYLEタグを書き入れて、以下のように指定します。

<HEAD>
〜〜〜(何かこの辺に色々他のタグが)
<STYLE TYPE="TEXT/CSS">
<!--
BODY { background-color : #RRGGBB ;
      background-image : url(URL) ;
      color : #RRGGBB ; }
A:link { color : #RRGGBB ; }
A:visited { color : #RRGGBB ; }
A:active { color : #RRGGBB ; }
A:hover { color : #RRGGBB ; }
-->
</STYLE>
</HEAD>


この色の字で描かれている部分が変更箇所です。
#RRGGBB の部分にはカラーコードを入れてください。
URL の部分には背景用画像のURLを入れてください。

background-color の部分では背景色を、
background-image の部分では背景画像を、
color の部分では文字色の指定が可能です。

A:link の部分ではリンク部分の文字色を、
A:visited の部分では1度たどったリンク部分の文字色を、
A:active の部分ではクリック中のリンク部分の文字色を、
A:hover の部分ではポインタが上に置かれている時の
リンク部分の文字色
を、指定する事が出来ます。
特に A:hover で指定出来る文字色はHTMLタグでは
指定する事が出来ないので、よく使われています。



例えば以下のようなスタイルシートを用いると、

<HEAD>
〜〜〜(何かこの辺に色々他のタグが)
<STYLE TYPE="TEXT/CSS">
<!--
BODY { background-color : #000000 ;
      background-image : url(image/well.png) ;
      color : #FFFFFF ; }
A:link { color : #FF0000 ; }
A:visited { color : #FF6699 ; }
A:active { color : #00FF00 ; }
A:hover { color : #FFFF00 ; }
-->
</STYLE>
</HEAD>


このようなHTML文書を作る事が出来ます ⇒ sample



ただし、これで指定をするとスタイルシートに対応していない
Webブラウザではデフォルトまんまで表示されてしまいます。
これを避ける為にはHTMLでも設定を行っておくのが妥当かと。
(スタイルシートに対応しているブラウザでは
HTMLでなくスタイルシートが優先されます)
まあでもこれ位のスタイルシートには大体のブラウザが
対応するようになっているので、大丈夫だとは思いますが。


←BACK    NEXT→