ブラウザの背景
ネットスケープやインターネット・エクスプローラ(Microsoft社)など、ブラウザ(閲覧ソフト)によってはページ背景の色や画像、あるいはテキスト部やハイパーリンク部など前景色の指定ができ、より視覚的なページを作成するのに効果的です。NCSA Mosaicのデフォルト(初期設定)は背景が単調なライトグレーですが、X11版の場合はリソースファイルを使って変更できます。この機能はページ本文を定義する<body>タグの属性(オプション)を指定することで実行しますが、何も効果を求めない場合、指定する必要はありません。以下が基本的な記述方法です。
<html> <head> <title>タイトル</title> </head> <body オプション> <h1>見出し</h1> : 本文 : </body> </html><body>タグの属性
背景画 (background)
背景画の指定はbackground属性を次のように指定し、指定したGIFかJPEGイメージがページ全体をタイル状に埋めます。このイメージへ透明GIFやインターレースGIFを用いることも可能です。また、イメージはURLで指定できるため、他のWWWサーバ上からも持ってこられます。<body background="URL(image.gif | image.jpg)">本文</body>たとえば、右のような雨粒の画像を使うと、<body background="../images/raindrop.gif">本文</body>別の画像で実例を作成してみました。
背景色 (bgcolor)
画像の代わり色を指定する方法があり、この場合はbgcolor属性を用います。<body bgcolor="#rrggbb | color_name">本文</body>#rrggbbを16進数の三原色(赤緑青)で指定するか、あるいは色の名称(color_name)も使えます。背景に赤色を指定したい場合、
<body bgcolor="#ff0000">または、<body bgcolor="red">
テキスト (text)
本文中のテキストはtext属性を使って色を指定します。<body text="#rrggbb | color_name">本文</body>先ほどの背景色と組み合わせ、黒い背景へ白いテキストを表示したい場合、
<body bgcolor="000000" text="ffffff">または、<body bgcolor="black" text="white">LINK属性では未アクセス・リンクの色が指定でき、デフォルトは青です。
VLINK属性ではアクセス済みリンクの色が指定でき、デフォルトは紫です。
ALINK属性ではマウスをクリックしてから接続が確立されるまでの色を指定でき、デフォルトは赤です。<body text=000000 link=#ff0000 vlink=#00ff00 alink=#ff0000>
背景、前景色の応用
透明GIFやインターレースGIFとバックグランド機能の組み合わせを使用すれば、より効果的です。また、backgroundとtext, link, vlink, alinkを組み合わせれば、さらに効果があります。<body background="../images/raindrop.gif" text=#000000 link=#ff0000 vlink=#00ff00 alink=#ff0000>ただ、うまく色のコーディネイトをしなければテキストの色やハイパーリンクの色が背景と混じって見にくくなる場合もあり、せっかくの効果が台無しになるため、注意して下さい。複雑な色であればあるほど、冒頭(ホームページ)の「はじめに」でも触れたとおり、自分のディスプレイで見る色は必ずしも読者が見る色と同じであるとは限りません。
背景色のフェードイン
ネットスケープ1.1Nより前のバージョンでは、複数の<body>タグを記述するかCGIを使って<body>タグの背景色を回してしまうことで、ページを移動した際、徐々に色が変わる「フェードイン」効果を得られました。しかし、これは単なるバグであるとネットスケープ社から正式発表があり、1.2以降のバージョンでは使えません。また、この機能を用いた場合、クライアントが落ちる危険性もあり、使用は避けたほうが無難です。ただ、フェードイン機能は大きな効果があると認識できたため、将来、追加される可能性はあるでしょう。<title>タグも同様で、タイトルを徐々に変化させられます。インターネット・エクスプローラの背景
インターネット・エクスプローラにはbgpropertiesという属性があり、ここへfixedを指定すれば透かし模様になります。<body background="../images/bg.gif" bgproperties=fixed>