HTMLでの背景色や背景画像の使い方を、サンプルを使って解説。

HTMLにおける背景の扱い

スポンサード リンク

よい背景を使うことによって、ホームページを本当に素晴らしく見せることができます。

背景のサンプル

背景とテキストの色サンプル
このサンプルは、ユーザーが読みやすい背景とテキストの色をデモンストレーションします。

背景とテキストの色サンプル2
このサンプルは、ユーザーが読みにくい背景とテキストの色をデモンストレーションします。

背景

<body>タグでは、背景を指定できる2つの属性を持っています。背景には色または画像が使用できます。

bgcolor属性

bgcolor属性は、HTMLページの背景色を指定します。この属性の値は、16進数やRGB値あるいは色名で指定できます。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

background属性

background属性は、HTMLページの背景画像を指定します。この属性の値は、使用したい画像のURLです。画像の大きさがブラウザウィンドウよりも小さい場合、ブラウザウィンドウ全体を満たすまで画像は繰り返されます。

<body background="bg.gif">
<body background="http://html.w-d-potal.com/bg.gif">

背景画像を使用する場合は、以下の点に注意してください

  • 背景画像のロード時間が長すぎないか
  • 背景画像によってページ上のテキストが見えにくくなっていないか

基本メモ - 役立ちTips

<body>タグの中で使用されるbgcolor属性やbackground属性およびtext属性は、最新バージョンのHTML(HTML 4.01やXHTML)で非推奨とされています。

背景のサンプル集

背景画像とテキストの色サンプル
このサンプルは、ユーザーが読みやすい背景画像とテキストの色をデモンストレーションします。

背景画像とテキストの色サンプル2
このサンプルは、ユーザーが読みにくい背景画像とテキストの色をデモンストレーションします。

スポンサード リンク