良い背景はサイトの見栄えを良くします。

背景と色の適切な一致
ページ上のテキストを読みやすくするための、背景色とテキストの色の適切な組み合わせの例。
背景と色が一致していません
背景色とテキストの色の一致が不十分で、ページ上のテキストが読みにくくなる例。

(その他の例はこのページの下部にあります)

背景

<body>には背景を構成するタグが2つあります。 背景には色または画像を使用できます。

背景色 (Bgcolor)

background-color プロパティは、背景を特定の色に設定します。 プロパティ値には、16 進数、RGB 値、または色の名前を指定できます。

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

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

背景

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

<body background="clouds.gif">
<body background="http://w3cstudy.cc/clouds.gif">

URL には、コードの最初の行などの相対アドレスを指定できます。 コードの 2 行目など、絶対アドレスを作成することもできます。

ヒント: 背景画像を使用する場合は、次の点に注意してください。

  • 背景画像によってページの読み込み時間が長くなるかどうか。 ヒント: 画像ファイルは 10k を超えないようにしてください。
  • 背景画像はページ上の他の画像とうまく調和していますか。
  • 背景画像がページ上のテキストの色とよく一致しているかどうか。
  • ページ全体に並べて表示した後、画像は問題なく表示されますか?
  • テキストが背景画像に邪魔されていませんか?

基本的なメモ - 役立つヒント:

<body> タグの background-color (bgcolor)、background (background)、および text (text) 属性は、最新の HTML 標準 (HTML4 および XHTML) では非推奨になりました。 W3C は推奨事項からこれらの属性を削除しました。

カスケード スタイル シート (CSS) は、HTML 要素のレイアウトと表示プロパティを定義するために使用する必要があります。

その他の例

使用可能な背景画像
ページのテキストを読みやすくするための背景画像とテキストの色の例。
使用可能な背景画像 2
ページのテキストを読みやすくする背景画像とテキストの色の別​​の例。
使いやすさの悪い背景画像
背景画像とテキストの色の例。ページのテキストが読みにくくなっています。