background-color

要素の背景色を指定します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ background-color : 値; }

▲PageTop

指定できる値

値 初期値 意味
transparent ○ 当該要素は透明となり、上位の要素で指定されている色になります。
16進数表記・色名 指定したカラーコード・色名が背景色になります。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
        #sample1 {
          background-color : black;
          color : white;
          width : 50%;
        }
        #sample2 {
          background-color : green;
          color : black;
          width : 50%;
        }
        #sample3 {
          background-color : yellow;
          color : pink;
          width : 50%;
        }
        #sample4 {
          background-color : aqua;
          color : navy;
          width : 50%;
        }
    </style>
  </head>
  <body>
    背景色：暗・フォント色：明
    <div id="sample1">background-colorサンプル1</div>
    <br&g;t
    背景色：暗・フォント色：暗
    <div id="sample2">background-colorサンプル2</div>
    <br>
    背景色：明・フォント色：明
    <div id="sample3">background-colorサンプル3</div>
    <br>
    背景色：明・フォント色：暗
    <div id="sample4">background-colorサンプル4</div>
  </body>
</html>

表示結果

背景色：暗・フォント色：明
background-colorサンプル1

背景色：暗・フォント色：暗
background-colorサンプル2

背景色：明・フォント色：明
background-colorサンプル3

背景色：明・フォント色：暗
background-colorサンプル4

▲PageTop

関連項目

HTML

<body> / <table> / <td> / <th>


CSS

background / background-image / color

▲PageTop

▲