Go to information

背景・文字・リンク色の基本設定

ここからようやく HTML を使ってウェブページ(ウェブサイト)を作っていると実感できるような内容へと入っていくのですが、その前に説明しておかなければならないことがあります。これから紹介する body要素に背景色・背景画像・文字色・各リンクアンカーの色を指定できる属性は W3C の策定した HTML4 の仕様では全て推奨されない属性に指定されています。なぜなら、HTML は効率的に情報交換を行うためのものであって、HTML に色などの見た目を整える視覚的な情報が混在していると情報伝達の妨げとなるからです。つまり、これから紹介する HTML で色などの見た目を整える指定はやってはいけないことの見本として覚えておきましょう。

body要素について

body要素は、HTML文書の本体を表し、見出しや段落、リストや表など文書そのものの内容はすべて body要素に包含され、視覚ブラウザなどの UA は、body要素の内容を本体として表示します。音声出力環境においても、body要素の内容から読み上げ始めることが期待されます。なお、宣言している DTD(文書型定義)が HTML4.01厳密型DTD の場合、body要素の直下にテキストやインライン要素を直接の子要素として記述することができません。次の文書で紹介する p要素や div要素などのブロック要素を直接の子要素として内容にしなければならないと覚えておいてください。

背景色・背景画像の設定

1, ページ全体の背景色を設定

<body bgcolor="#000000">

body要素の bgcolor属性は、ページの背景色を設定する属性です。属性値には色を指定します。上記の場合は、"#000000" なので背景色に黒色を指定しています。"#000000" のような数値を RGB値 と呼びます。RGB値は、ディスプレイの色を構成する R(赤)・G(緑)・B(青)の光の三原色それぞれに対して、16進数(0-9 + A-F)を用いて2桁の数値で表記、それを横並びにした6桁の数値で示します。その数値の先頭には、必ずハッシュ(#)を前置します。また、色は16進数の数値で指定する他にも、"red", "yellow", "blue" のように色の名前で指定する方法にカラーネームがあります。このように、HTML における色は RGB値、またはカラーネームで指定します。

背景色の指定がない場合は、UA の環境設定で指定されている背景色の初期値で表示されます。

*bgcolor属性は、非推奨属性です。

2, ページ全体の背景画像を設定

<body background="back.gif">

body要素の bacground属性は、ページの背景に画像を表示させる属性です。bacground属性の値には、ページ全体の背景画像として貼り込みたい画像ファイルの所在を URI で指定します。画像ファイルは表示域に合わせて、縦横にタイル状に繰り返し表示されます。背景画像を指定する場合は、容量の大きなファイルを指定するとページそのものの表示(レンダリング)も遅くなってしまうため、できるかぎり容量の小さな画像ファイルを使用するようにしましょう。

また、background属性といっしょに背景色を指定する bgcolor属性を指定した場合、先に bgcolor属性の RGB値、またはカラーネームで指定された色を表示した後に、その上から背景画像が表示される形になります。そこで何らかのトラブルで画像ファイルの読み込みができない場合や、画像表示に対応していない環境のために背景色と文字色のコントラストが高い組み合わせとなるように background属性 は bgcolor属性と組み合わせて指定しておくようにしましょう。

*background属性は非推奨属性です。

文字・リンク色の基本設定

<body text="#000000" link="#0000FF" alink="#FF0000" vlink="#800080">

body要素の text属性, link属性, alink属性, vlink属性はそれぞれページ内のテキストの表示色とアンカーテキストのリンク色を指定します。色の指定方法は、背景色の指定と同じで、RGB値、またはカラーネームで指定します。

text属性は、基本表示色で、個々に文字色の指定がない限り、ここで指定した色がページ全体のテキストの文字色として表示されます。link属性は、リンクが設定されている場合に、通常のテキストとアンカーリンク部分のテキストを区別しやすいようにアンカーテキストのリンク色を指定します。上記の例では、テキストの色を "#000000" の黒色に、アンカーテキストのリンク色を "#0000FF" の青色に指定しています。さらに link属性に alink属性と vlink属性をあわせることで、それぞれ以下の役割をします。

link属性
リンクが設定されたアンカーテキストの色
alink属性
アンカーテキスト部分をクリックしている状態(アクティブ)の表示色
vlink属性
アンカーテキストのうち、リンク先がアクセス(訪問)済みの場合の表示色
<body backgroung="back.gif" text="#000000"
link="#0000FF" alink="#FF0000" vlink="#800080">

*text属性, link属性, alink属性, vlink属性は非推奨属性です。

ページ全体の背景画像の固定表示

<body background="back.gif" bgproperties="fixed">

body要素の bgproperties属性は、背景画像の表示を固定させるか否かを指定する属性です。背景画像を指定する background属性と合わせて使います。通常、縦長のページでスクロールするとページの内容と一緒に背景画像も移動してしまい、文字が読みづらくなることがあります。そこで背景画像を設定している場合に背景画像を固定表示することによって、縦長のページでスクロールしても見やすくさせる効果があります。

*bgproperties属性はブラウザの独自機能です。Windows版Internet Explorer, Opera, Safari, Macintosh版Internet Explorer 5 がサポートしています。

ブラウザの独自機能について

ブラウザの独自機能というものが出てきました。これは、ブラウザを開発している各社が HTMLレンダリングエンジンに独自に拡張して取り入れた機能です。もちろん、HTML の正式な仕様には定義されておらず、ブラウザの種類やバージョンによって動作しなっかりします。このようなブラウザの独自機能が生まれたのは、1990年代半ばの Microsoft社と Netscape Communications社による激しいブラウザ市場シェア争奪、いわゆるブラウザ戦争に起因します。当時、両ブラウザベンダーは市場シェア獲得のため他方との差別化ばかりを図り、様々な機能を独自に取り入れました。しかし、この独自機能が使われると、あるウェブコンテンツを他社のブラウザでは正しく表示できない問題が多数発生し、多くのユーザーの混乱を招きました。そして、こういった問題を経てブラウザ開発各社が独自に機能を拡張するようなことはなくなりましたが、過去に取り入れられた独自機能が現在も禍根として残っているのです。このためブラウザの独自機能はなるだけ使用しないことをお奨めします。

ページ全体の余白(マージン)設定

<body topmargin="50" rightmargin="30" bottommargin="50" leftmargin="30">

body要素の topmargin属性はページ上部に、rightmargin属性はページ右部に、bottommargin属性はページ下部に、leftmargin属性はページ左部にそれぞれ余白(マージン)を設ける属性です。値は整数で指定し、ピクセル数で解釈されるようになっています。これらの属性を指定しない場合、余白はブラウザに設定されている余白の初期値で表示されます。余白を全くとらないようにするには、それぞれの属性値に "0" の値を指定します。

*topmargin属性, rightmargin属性, bottommargin属性, leftmargin属性はブラウザの独自機能です。Windows版Internet Explorer, Opera, Safari, Macintosh版Internet Explorer 5 がサポートしています。

<body marginheight="50" marginwidth="30">

また Netscape には marginheight属性, marginwidth属性の独自機能があり、maginheight属性はページ上下に、marginwidth属性はページ左右に余白(マージン)を設ける属性です。属性値は、同じようにピクセル数で解釈されます。

*marginheight属性, marginwidth属性はブラウザの独自機能です。Netscape, Firefox がサポートしています。

現在位置
  1. W3G
  2. XHTML
  3. HTML速習
  4. 背景・文字・リンク色の基本設定
ナビゲーション
ステータス情報
作者
上田 遼
公開
2005-08-01T14:17:39+09:00
更新
2008-12-29T04:27:06+09:00
URI
http://w3g.jp/xhtml/ref/body_property
検索