WebPage発射台(初心者の、初心者による、初心者のためのWebPage作り講座)


ページの文字色全てを変える

標準的な色のページはこのような色なのですが・・・・・

<body>

 

以下のようなページになります
背景画像 なし(標準)
背景画像が出てくるまでの背景色は 白(標準)
テキスト(文字) 黒(標準)
ハイパーリンク 青(標準)
表示済みのリンク 紫(標準)

背景色を変えたり、背景画像をつけたりするとこのように文字が見にくくなってしまいます。

<body bgcolor="#006000">

 

以下のようなページになります
背景画像 なし(標準)
背景画像が出てくるまでの背景色 濃い緑 "#006000"
テキスト(文字)
ハイパーリンク 青標準)
表示済みのリンク 紫(標準)

これを解決するために、もともとある<body>タグを少し書き換えます。

<body bgcolor="#006000" text="#FFFFFF" >

 

以下のようなページになります
背景画像 なし(標準)
背景画像が出てくるまでの背景色 濃い緑 "#006000"
テキスト(文字) 白 "#FFFFFF"
ハイパーリンク 青(標準)
表示済みのリンク 紫(標準)

特に背景色が黒になると、文字が白でなくては読むことは不可能です。

<body bgcolor="#000000" text="#FFFFFF" >

 

以下のようなページになります
背景画像 なし(標準)
背景画像が出てくるまでの背景色 黒 "#000000"
テキスト(文字) 白 "#FFFFFF"
ハイパーリンク 青(標準)
表示済みのリンク 紫(標準)

応用:背景画像に”宇宙”を設定しました。背景画像を読み込むのに時間がかかることがあるので、背景色を背景画像と似た色に設定しておきます。

<body background="../img/space_a.gif" bgcolor="#000000" text="#FFFFFF" >

 

以下のようなページになります
背景画像 img/space_a.gifといったほとんど黒い画像
背景画像が出てくるまでの背景色 黒 "#000000"
テキスト(文字) 白 "#FFFFFF"
ハイパーリンク 青(標準)
表示済みのリンク 紫(標準)

更にハイパーリンクや表示済みのリンクの文字の色を少し明るいものにしました。

<body background="../img/space_a.gif" bgcolor="#000000"
text="#FFFFFF" link="#00FFFF" vlink="#FF00FF">

 

以下のようなページになります
背景画像 img/space_a.gifといったほとんど黒い画像
背景画像が出てくるまでの背景色
テキスト(文字)
ハイパーリンク 明るい青 "#00FFFF"
表示済みのリンク 明るい紫 "#FF00FF"

この方法を使うと、「ハイパーリンクを赤で表示」ということもできますが、訪問者にとって大変読みにくいページになってしまいます。

リンクは青系の色、表示済みは紫系の色、と統一しておいたほうが無難です。

背景色の設定により雰囲気がだいぶ変わります。「色見本、昼のページ」「色見本、夜のページ」


本文にもどる

初回アップロード:2003年8月12日
最終更新日   :2003年10月14日