HTML 背景

良い背景はサイトが特別に見えます。

例

背景色と文字色の組み合わせが良い例
背景色と文字色が良く合った例です。これにより、ページ内のテキストが読みやすくなります。
背景色と文字色の組み合わせが悪い例
背景色と文字色が良く合っていない例です。これにより、ページ内のテキストが読みにくくなります。

（ページの下部にさらに多くの例を見つけることができます。）

背景（Backgrounds）

<body> 背景色を設定するタグが2つあります。背景は色または画像で設定できます。

背景色（Bgcolor）

背景色属性は背景を特定の色に設定します。属性値は16進数、RGB値または色名で指定できます。

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

上記のコードはすべて背景色を黒色に設定しています。

背景（Background）

背景属性は背景を画像に設定します。属性値は画像のURLです。画像のサイズがブラウザのウィンドウより小さい場合、画像はブラウザのウィンドウ全体に複製されます。

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

URLは相対的なアドレス、例えば最初のコード行のように、または絶対的なアドレス、例えば第二行のコード行のように使用できます。

ヒント：背景画像を使用する場合、以下のポイントを心に留めておいてください：

  • 背景画像がページのロード時間を延ばしていますか。ヒント：画像ファイルは10kを超えないようにしてください。
  • 背景画像がページ内の他の画像と相性が良いですか。
  • 背景画像がページ内のテキストの色と相性が良いですか。
  • ページ内で画像がタイル状に敷かれた後、見栄えがどうですか？
  • 背景画像がテキストの注意を奪っていますか？

基本的な注意事項 - 有用なヒント：

<body> タグ内の背景色（bgcolor）、背景（background）およびテキスト（text）属性は、最新のHTML標準（HTML4およびXHTML）では廃止されました。W3Cの推奨標準ではこれらの属性が削除されています。

HTML エレメントのレイアウトと表示属性を定義するために、カascading Style Sheets（CSS）を使用するべきです。

さらに多くの例

ユーザビリティの高い背景画像
背景画像とテキストの色がページのテキストを読みやすくする例です。
ユーザビリティの高い背景画像 2
別の背景画像とテキストの色がページのテキストを読みやすくする例です。
ユーザビリティの低い背景画像
背景画像とテキストの色がページのテキストを読みにくくする例です。