背景の設定

Home>HTML>背景の設定

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

背景色は、ページ全体のイメージを決めるものでもあります。通常、何も設定しなければ、背景色は白、テキストは黒となります。
実際に目が疲れにくいのは、黒地に白のテキストのサイトではないかと思いますが、その場合、若干怪しさのようなものが醸し出されてしまうので、自分の発信するサイトの内容と合わせて色を決めましょう。

背景の色を設定する

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(スクロールを無視し画面の同じ位置に固定表示)
scroll(スクロールにより見えなくなる。初期値。)

background-position

背景画像を表示する位置を横・縦の順番で指定する。
数値で指定(px又は%)をすると、左上を起点として表示。

bottom(画面の下部)
center(画面中央)
left(画面左寄り)
right(画面右寄り)
top(画面の上部)

background-repeat

背景画像の並び方を指定する。

repeat(上下左右にくり返し表示)
repeat-x(左右にくり返し表示)
repeat-y(上下にくり返し表示)
no-repeat(一つだけ表示)

→背景画像の固定は「CSS:プロパティリファレンス:background-attachment」をご覧下さい。

→背景画像の表示位置は「CSS:プロパティリファレンス:background-position」をご覧下さい。

→背景画像のくり返し表示は「CSS:プロパティリファレンス:background-repeat」をご覧下さい。

関連リンク

よく読まれている記事

UpDate:2009-11-20