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

Updated / Published

ここからようやく HTML を使って作っていることが実感できるような内容へと入っていくのですが、これから紹介する body要素で背景色・背景画像・文字色・各リンクアンカーの色を指定できる属性は W3C の策定した HTML4 の仕様では全て推奨されない属性に指定されています。なぜなら、HTML は効率的に情報交換を行うことを役割とした文書を作るための言語であるため、HTML 内に直接、色などの見た目を整える視覚的な指定をすることはHTML本来の役割ではなく、情報伝達においても妨げとなります。

そのためHTMLでは視覚的な指定をしなくてもHTML文書のプレゼンテーションができるように、そしてHTML文書が本来の情報伝達のみの役割に徹することができるように、HTML文書用のスタイルシート言語としてCSSが用意されています。本稿ではまだCSSについての解説は取り扱いませんが、同じ表現をすることが可能になるCSSの機能（プロパティ）もあわせて紹介しています。

これから説明する属性を使えば簡単な記述だけで見た目を操作できるので、プレゼンテーションすることの面白さを実感するには良い教材となります。しかし、これは本来やってはいけないことであることを知っておいてください。本稿では、やってはいけないことを理解してもらうための教本としてやってはいけないこともあえて含めて解説しています。

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属性は、非推奨属性です。

関連するCSS

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

<body background="back.gif">

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

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

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

関連するCSS

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

<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属性は非推奨属性です。

関連するCSS

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

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

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

*bgproperties属性はブラウザの独自機能です。

関連するCSS

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

ブラウザの独自機能というものが出てきました。これは、ブラウザを開発している各社が 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属性はブラウザの独自機能です。

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

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

*marginheight属性, marginwidth属性はブラウザの独自機能です。

関連するCSS