[Up] [Next] [Previous]

背景図・色と前景色

ブラウザ(Netscape や Microsoft)によっては、ページの背景図・色や前景色 を定義することができます。これは、より視覚的な効果のあるページを作るた めに非常に有効な機能です。NCSA Mosaicはデフォルトでは背景が単調なライ トグレーですが、X11版の場合はリソースファイルを使って変更する事が可能 です。

NEC 社によって改造された NCSA Mosaic 2.6-ln10+ では、背景色が指定できます。
この機能はページ本文を定義する<BODY>タグを拡張したもの で実現しています。BODYタグは <BODY>〜</BODY>で表され、本文を表します。(何も 効果を出さない場合は、省略することもできます)

<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY オプション>
<H1>見出し</H1>
 :
本文
 :
</BODY>

背景図 BACKGROUND属性

背景図(絵)指定するにはBACKGROUND属性を次のように使用し、図は GIFもしくはJPEGイメージをページ全体にタイル状に埋めます。このイメージ に透明GIFやインタレースGIFを使用することも可能です。

<BODY BACKGROUND="URL(foo.gif|foo.jpg)">Document here</BODY>
イメージはURLで指定できるため、他のWWWサーバにあるイメージも指定できます。

<BODY BACKGROUND="http://www.foo.co.jp/bg/raindrop.gif">Document here</BODY>
下図に雨粒を模した背景図を使った例を示します。 
<BODY BACKGROUND="bg/raindrop.gif">

背景図を使った例

上記は下図のような背景図を使用しています。これをタイル状に引きつめた効 果であることがわかります。


使用した背景図

背景色 BGCOLOR属性

もうひとつの方法として単一色を指定する方法があります。これはBGCOLOR属 性を使用します。

<BODY BGCOLOR="#rrggbb | color_name">Document here</BODY>
#rrggbb は16進数で3原色(赤緑青)を指定します。 Netscape 2.0 では色の名前 color_name を使うこともできます。

下記の例は、背景に赤を指定した例です。 

<BODY BGCOLOR="#FF0000">

または

<BODY BGCOLOR="Red">

背景色の指定

前景色

前景色はテキスト部やハイパーリンク部の色を指定することができます。

テキスト(TEXT)属性

本文のテキスト部の色はTEXT属性を使用します。 
<BODY TEXT="#rrggbb | color_name">Document here</BODY>
先程の背景色と組み合わせ以下のように指定すると、黒色の背景に白色の文字 で本文が表示されます。

<BODY BGCOLOR="000000" TEXT="FFFFFF">

または

<BODY BGCOLOR="Black" TEXT="White">

前景色と背景色の指定

ハイパーリンク(LINK, VLINK, ALINK)属性

<BODY LINK=#FFFF00 VLINK=#00FF00 ALINK=#FF00FF>

ハイパーリンクポイントの色指定

背景・前景色の応用

透明色GIFやインターレースGIFとバックグラウンド機能の組合せを使用すると、 より効果的です。また、BACKGROUND と TEXT, LINK, VLINK, ALINKと組み合わせたら更に効果的でしょう。

<BODY BACKGROUND="raindrop.gif" TEXT=#FF0000 LINK=#FFFF00
        VLINK=#00FF00 ALINK=#FF00FF>

背景図、背景色、前景色の組み合わせ

但し、うまく色のコーディネートをしないと、テキストの色やハイパーリンク の色が背景と混じって見にくくなる場合もあり、せっかくの効果が台無しになっ てしまいますので、くれぐれも気を付けましょう。複雑な色であればあるほど、 自分のディスプレイで見る色は必ずしも相手側で見る色と同じとは限りません。

背景色のフェードイン

Netscape 1.1N より以前のものは、<BODY>タグを複数記述す る(あるいは、CGI を使って、<BODY>タグの背景色の色を回し てしまう)ことにより、ページを移動した際に色がだんだん変わる効果(フェー ドイン)を得られるとしていましたが、これは Netscape 社から、単なるバグ であることが正式にアナウンスされ、バージョン 1.2 以降では使用できなく なっています。この機能を使った場合、クライアントが落ちる危険性もあるの で、使用しない方が無難です。
これは、<TITLE>タ グも同様でタイトルを徐々に変化させることもできます。
Netscape 3.0 からは JavaScript を使って、フェードイン効果を生むことが できます。スクリプトの中で、document.bgColor の値を変えてあげればよい わけです。いくつかのフェードスクリプトが作られています。

デモ

MSIEの背景

Microsoft Internet Explorer は Netscape と同様のBODYタグの BACKGROUND属性によって、背景図をタイル状に張り付けることがで きます。そして、BGPROPERTIES属性にFIXEDを指定すると 背景図が固定されます。

<BODY BACKGROUND="background.gif" BGPROPERTIES=FIXED>

[Up] [Next] [Previous]