気の向くままに辿るIT/ICT/IoT
CSS / Cascading Style Sheets / スタイルシート

background-color/background CSS背景色設定

ホーム前へ次へ
背景色指定『BGCOLOR(HTML) BACKGROUND/BACKGROUND-COLOR(CSS)編』

background-color/background CSS背景色設定

background-color/background CSS背景色設定

 スタイルプロパティまたはCSSプロパティで背景色を設定するには、背景色専用のbackground-colorプロパティまたは、background-colorを含む背景関連プロパティをまとめて設定することが可能な略記プロパティであるbackgroundプロパティを利用します。

CSS1 background-color / CSS2 background-color / CSS3 background-color

CSS1 background / CSS2 background / CSS3 background

CSSとHTML/XHTMLによる背景色の各種スタイル設定と推奨される方法

 また、スタイル設定方法には、W3C仕様HTML4/XHTML1HTML5ではページ全体に背景色を設定する場合、実質以下の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非推奨となっています。
 必要な場合は他の方法(CSS)を利用しましょう。

-->
</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 style=" background:色指定 ; ">

backgroundプロパティの場合は、色だけでなく背景に関するプロパティをスペース区切りで複数設定可
-->
</body>
</html>

CSSインライン設定参照

◆Cの場合
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
body  { background-color:色指定 }
/*
または

body  { background:色指定 ; }

backgroundプロパティの場合は、色だけでなく背景に関するプロパティをスペース区切りで複数設定可
*/
</style>
</head>
><body>

</body>
</html>

CSSファイル内部設定参照

◆Dの場合

CSS外部ファイル設定参照

 次は

全体に背景画像を指定したい『BACKGROUND(HTML) BACKGROUND-IMAGE(CSS)編』

CSS/スタイルシート情報

ホーム前へ次へ