■ 色と背景

コンテンツに色や背景などに工夫を凝らすことで、印象的な素晴らしいページを表現することができます。この節では、色と背景に関する手法を集めました。

なお、文字に色をつける方法は、この章の 「フォント」の項をご覧ください。

背景色を設定する

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

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

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

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

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

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

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

背景に画像を用いる

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

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

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

枠線に色を設定する

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

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

リンクに色を設定する

アンカーテキストに色を設定する方法ですが、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の設定の機能は、以下の通りです。

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


This Page is HTML4.01 Valid! 初版更新日 2003年1月4日
Copyright(C) 2002-2004 banban@scollabo.com