背景の設定
背景色は、ページ全体のイメージを決めるものでもあります。通常、何も設定しなければ、背景色は白、テキストは黒となります。
実際に目が疲れにくいのは、黒地に白のテキストのサイトではないかと思いますが、その場合、若干怪しさのようなものが醸し出されてしまうので、自分の発信するサイトの内容と合わせて色を決めましょう。
背景の色を設定する
bgcolor属性で背景色を設定する
body要素にbgcolor属性を指定すると、そのページの背景色を設定することができます。
<body bgcolor="#000000">~</body>
この場合は、背景色を黒にしています。
背景色を設定するときは、必ずテキストの色も設定します。
<body bgcolor="#000000" text="#ffffff">~</body>
テキストの色は、text属性で設定できます。
背景とテキストの色が近いと、読者にとって読みづらいページになってしまいます。
ただし、body要素にbgcolor属性やtext属性などを指定して、直接HTMLから色を設定するのは、非推奨とされているので、次に紹介するCSSで設定しましょう。
→詳しくは「HTML:要素リファレンス:body」をご覧下さい。
CSSで背景色を設定する
CSSでは、以下のように設定します。
<body style="background-color:#000000;color:#ffffff;">~</body>
これは、背景色(background-color)を黒に、テキストの色(color)を白に設定する、というCSSの指定で、上記のbody要素に設定した属性と同じ役割を果たします。
さらに推奨される方法は、CSSを外部ファイルとして読みこんで使うことです。
→背景色の設定は「CSS:プロパティリファレンス:background-color」をご覧下さい。
→外部ファイルの読み込みは「CSS:用途別リファレンス:CSSの反映」をご覧下さい。
背景に画像を表示する
背景に色ではなくて画像を指定する方法です。
背景色と同じく、背景に画像を指定したときには、画像の色にテキストが消えてしまわないように、画像の上にも映える色をテキストに同時に指定しましょう。
background属性で背景画像を設定する
<body background="[画像のURL]">~</body>
background属性に、背景に使用する画像のURLを入力します。
背景の画像は、ブラウザのサイズよりも小さければ、ブラウザのサイズ一杯まで、上下左右にくり返して表示されます(画像を一つだけ表示する、画像を固定する、といった設定はできません)。
background属性は非推奨とされているので、背景に画像を表示する場合は、この方法で設定するよりも、以下で述べるCSSによる表示を心掛けましょう。
CSSで背景画像を設定する
<body style="background-image:url([画像のURL]);">
CSSで設定するときは、background-imageプロパティを使います。
このほか、背景の画像に指定できるプロパティには以下のものがあります。
background-attachment | 背景画像を固定するかどうかを指定する。 fixed(スクロールを無視し画面の同じ位置に固定表示) |
background-position | 背景画像を表示する位置を横・縦の順番で指定する。 bottom(画面の下部) |
background-repeat | 背景画像の並び方を指定する。 repeat(上下左右にくり返し表示) |
→背景画像の固定は「CSS:プロパティリファレンス:background-attachment」をご覧下さい。
→背景画像の表示位置は「CSS:プロパティリファレンス:background-position」をご覧下さい。
→背景画像のくり返し表示は「CSS:プロパティリファレンス:background-repeat」をご覧下さい。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2009-11-20