スタイルプロパティまたはCSSプロパティで背景色を設定するには、背景色専用のbackground-colorプロパティまたは、background-colorを含む背景関連プロパティをまとめて設定することが可能な略記プロパティであるbackgroundプロパティを利用します。
また、スタイル設定方法には、W3C仕様HTML4/XHTML1やHTML5ではページ全体に背景色を設定する場合、実質以下の4つの方法がありますが、下記A)の設定方法はHTML4においても非推奨、B)C)はCSS1で定義されましたが、CSS2(CSS 2.0/CSS 2.1)/CSS3含む以降はスタイル設定にはCSS外部ファイル(外部CSS・外部スタイルシート)が推奨されています。
A) 「<body>開始タグ」に「bgcolor属性」を設定(HTML4で定義/W3C非推奨)
B) 「<body>開始タグ」内に「style属性」を設定(CSS1/HTML3.2で定義)
C) <head></head>内に「style要素」を設定(CSS1/HTML4で定義)
【推奨】
D) 外部ファイルで背景色指定、HTML/XHTMLファイルに読み込んで設定
(CSS2/HTML4で定義)
それぞれの設定方法は下記の通りです。
◆Aの場合 |
---|
<html>
<head> </head> <body bgcolor="色指定"> <!--
※bgcolorはW3C非推奨となっています。
</body> </html> |
B)~D)の場合は、CSSプロパティ設定方法とCSSカラー・色設定方法に沿ってCSSのbackgroundまたはbackground-colorなどのCSSプロパティを設定します(XHTMLでも有効)。
◆Bの場合 |
---|
<html>
<head> <meta http-equiv="content-style-type" content="text/css"> </head>
<body style=" background-color:色指定 ">
</body>
<!-- または <body style=" background:色指定 ; "> backgroundプロパティの場合は、色だけでなく背景に関するプロパティをスペース区切りで複数設定可 --> </html> ※CSSインライン設定参照 |
◆Cの場合 |
---|
<html>
<head>
><body>
<meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> body { background-color:色指定 } /* または body { background:色指定 ; } backgroundプロパティの場合は、色だけでなく背景に関するプロパティをスペース区切りで複数設定可 */ </style> </head> </body> </html> ※CSSファイル内部設定参照 |
◆Dの場合 |
---|
※CSS外部ファイル設定参照 |
次は
全体に背景画像を指定したい『BACKGROUND(HTML) BACKGROUND-IMAGE(CSS)編』