ページ全体に配色を施す

1ページの全体にわたって指定することができるのは、
背景色文字色ハイパーリンク部分の文字色です。


1.<BODY>オプションの使い方

基本形…
<BODY BGCOLOR="*" TEXT="*" LINK="*" VLINK="*" ALINK="*">

各オプションはすべて指定しなくても構いません。
ホームページ側で指定しない場合は、見る側がブラウザで設定した色になります。 これをデフォルトカラーと呼びます。

BGCOLOR… 背景色
内容を書き込む「紙の色」に相当するので重要。 デフォルトは白か灰が一般的。

TEXT… フォント色
文字を書く「ペンの色」に相当するので重要。 デフォルトは黒

LINK… ハイパーリンクのキーワードの色
リンク部分が見る側の目を引くように、目立つ色が良い。 デフォルトは青

VLINK… 一度リンク先のページを見ている場合( visited )
リンクのキーワードがこの色になる。 デフォルトは紫か赤が一般的。

ALINK… まさにクリックされている途中の色( active )
あまり指定されないことが多い。デフォルトは赤

ex.)
<BODY BGCOLOR="white" TEXT="#000000" LINK="BLUE" ALINK="#FF00FF">


2.各オプションの使い方

背景色には 白や黒、パステルカラーがよく使われています。
フォント色と3種類のリンク色のすべてがこの背景色の上に乗るため、 個性の強い色を使うとその他の配色が難しくなるからです。

フォント色には 黒や白、ダークカラーがよく使われています。
重要なのは、背景色に近い色を使わないことです。
背景色とそっくりな色は読めなくなってしまいますから、 普通の用法では使えません。また赤や青の目立つ色を使うと、 ページ全体の印象がきつくなってしまいます。

リンク色には 逆によく目立つ色が好まれます。
ブラウザの設定によってはリンク部分にアンダーラインが引かれないため、 色だけでも十分にリンク部分であることがわかるようなページにしましょう。

既読リンク色には、 リンク色に使われた色と対照的でよく目立つ色か、 リンク色と同系でややくすんだ色がよく使われます。
リンク色と同じ設定をすることも可能で、 社会情報学部のホームページのように何度も見るページは、 ページがきつくならないように統一されています。
また、三択クイズを作るときにも応用できます(笑)

動作リンク色はあまり設定されませんが、 設定しておけばページを見る人にリンクキーワードをクリックした実感を持たせることが出来ます。
他のリンク色と全く違う色にするか、 あるいは背景色と同じにして、 クリックした瞬間に色が消えるような効果を狙うと面白いでしょう。


3.壁紙と背景の関係

ホームページにはご存じの通り壁紙画像を貼ることができます。 壁紙に使える画像ファイルの種類は、 CompuServe GIF形式JPEG形式の2種類です。 ファイルネームの拡張子に注意してください。

基本形… <BODY BACKGROUND="FileName">

ここで実は壁紙と背景色を同時に設定することができるのです。 背景色は壁紙で隠されてしまうがゆえに、あまり意味がない気もしますが、 いくつか気を付けておきたいポイントがあります。

☆ 壁紙が表示されるまでの間、背景色が表示される。
例えば星空の壁紙を貼って、背景色のオプションを設定しなかったとします。
当然フォント色は白を使うことになるでしょうから、 星空が表示されるまでの間 白地または灰地に白文字が読み込まれるページとなってしまいます。
ローカル上では画像がすぐに読み込まれるので気づきにくいことですが、 インターネットを経由して見ている人にとっては何秒かかるかわかりません。

☆ 透過GIFの隙間から背景色が見える。
壁紙用の画像を選んで使っている場合には起こらないことですが、 丸いアイコンなどでよく使われる透過GIF画像を壁紙にした場合、 画像の透過色部分から背景色が見えてしまいます。
不自然な配色とならないように背景色を設定しなければならないので少々面倒ですが、 逆に時間と共に背景色が変化するスクリプトを組んで、 画像の隙間から配色の変化を楽しむという、裏技的な生かし方もあります。

ex.)
<BODY BACKGROUND="clearbg.gif" BGCOLOR="lightskyblue">


[ ▲ 戻る ]