■ 背景色を設定する

ページ全体の背景色を設定する方法は、２つあります。

<body bgcolor="#ffffcc">  （非推奨)
<body style="background-color:#ffc">  （CSSの設定：推奨）
body { background-color: #ffc }       （CSSの設定：推奨）

スタイルシートでは、RGB３桁によるカラーコードの記述が可能です。また、できるだけユーザ環境を配慮して、Web Safe Color の使用をお勧めします。

PageTop

■ コンテンツに背景色を設定する

HTMLでの、bgcolor属性では、テーブルに関する要素のみ背景色が指定できますが、スタイルシートでは、ほとんどの要素に背景色を設定することが可能です。

<table bgcolor="#ffffcc" cellpadding="0" cellspacing="0">  （非推奨)
<td bgcolor="#ffffcc">  （非推奨)
<div style="background-color:#ffc">  （CSSの設定：推奨）
h1 { background-color: #ffc }        （CSSの設定：推奨）

実際にこのページでも、スタイルシートによる背景色を設定を行っています。スタイルシートでは、ほとんどの要素に背景色が指定できるので、あまり容量を増やすことなく、カラフルなページを構築することができます。

PageTop

■ 背景に画像を用いる

ページ全体の背景に画像を用いる方法は、２つあります。

<body background="images/kabe.png">  （非推奨)
<body style="background-image:url('images/kabe.png')"> (CSSの設定：推奨)
body { background-image: url("images/kabe.png") }     (CSSの設定：推奨)

HTMLでは、bgcolor属性同様に、ページの背景とテーブルに関する要素のみ画像を用いることができます。スタイルシートは、すべての要素に設定が可能です。

PageTop

■ 枠線に色を設定する

コンテンツの枠線に色を設定する方法は、基本的にはスタイルシートでしか指定することができません。HTMLの規格外属性として、bordercolor、bordercolorlignt、bordercolordark などがありますが、ブラウザによっては表現できない場合があります。

<table bordercolor="green">  （規格外）
<table style="border:thin solid green">  （CSS設定：推奨）
div { border-top: 3px double #090 }      （CSS設定：推奨）

PageTop

■ リンクに色を設定する

アンカーテキストに色を設定する方法ですが、HTMLでの記述は非推奨とされており、スタイルシートの設定が推奨されています。また、スタイルシートの設定には、マウスが触れたときの色、、クリックされた瞬間の色など、細かく指定できる特徴がありインタラクティブに反応します。

<body link="#0000ff" alink="#ff0000" vlink="#ff00ff">  （非推奨）

CSS設定
a:link { color: #00f }
a:visited { color #f0f }
a:alink { color: #f00 }
a:hover { background-color: #ff0; color: #000 }
a:active { background-color: #f00; color: #fff }

HTMLとCSSの設定の機能は、以下の通りです。

HTML	CSS	コントロールの機能
link	a:link	未訪問のリンク先の色
alink	a:alink	リンク先のページを読み込み中の色
vlink	a:visited	訪問済みのリンク先の色
-	a:hover	リンクにマウスが触れたときの色
-	a:active	リンクをクリックした瞬間の色