CSS3: background-color プロパティ - 背景の色

■ 概要

項　　目説　　明
記述形式 セレクタ {background-color: 色 }
値 の形式 transparent | #rrggbb （RGB16進） | 色の名前
初 期 値 transparent
対応ブラウザー H3+ / e6+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継　　承 しない

■ 解説

background-color プロパティ は，要素内の文字などの 背景の色 を指定します。

要素の色を設定するプロパティとしては、ほかに color（文字や前景の色）， border-color（境界色）， outline-color（輪郭色） などがあります。　

"transparent" と指定した場合には，親要素の背景色が継承され，ちょうど親要素の背景色が透けて見えるような状態になります。

それ以外の色の指定方法は，colorプロパティと同じで，"#" の後に R（赤），G（緑），B（青）の光の３原色をそれぞれ２桁の16進数で表した数値を並べた #rrggbb 形式で指定する方法や色の名前で指定する方法などがあります。（「色の値」を参照。）

以下に代表的な16色の #rrggbb と色の名前を示します。

#rrggbb 色の名前表　示
#ffffffwhite
#c0c0c0silver
#0000ffblue
#00ffffaqua
#00ff00lime
#ffff00yellow
#ff0000red
#ff00fffuchsia
#808080gray
#008080teal
#000000black
#000080navy
#008000green
#808000blue
#800000maroon
#800080purple

なお、色の名前の一覧は原色大辞典のブラウザで名前が定義されている140色の色名，RGB の 16進数による色の一覧は、同じくカラーコード順のカラーチャートなどを参照してください。

■ 使用例（ background-color プロパティの利用）

上の表の第３列部分は、次のような記述です。

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!-- 
   tr.at { background-color: #CCCCFF; border-color: #c0c0c0; }
-->
</style>
HTML
<body> ～ </body>		 
    <table class="pt" style="width: 50%;">
       <tr class="at"><th>表　示</th></tr>
       <tr><td style="background-color:#ffffff"><br></td></tr>
       <tr><td style="background-color:#c0c0c0"><br></td></tr>
       <tr><td style="background-color:#0000ff"><br></td></tr>
       <tr><td style="background-color:#00ffff"><br></td></tr>
       <tr><td style="background-color:#00ff00"><br></td></tr>
       <tr><td style="background-color:#ffff00"><br></td></tr>
       <tr><td style="background-color:#ff0000"><br></td></tr>
       <tr><td style="background-color:#ff00ff"><br></td></tr>
       <tr><td style="background-color:#808080"><br></td></tr>
       <tr><td style="background-color:#008080"><br></td></tr>
       <tr><td style="background-color:#000000"><br></td></tr>
       <tr><td style="background-color:#000080"><br></td></tr>
       <tr><td style="background-color:#008000"><br></td></tr>
       <tr><td style="background-color:#808000"><br></td></tr>
       <tr><td style="background-color:#800000"><br></td></tr>
       <tr><td style="background-color:#800080"><br></td></tr>
    </table>

ブラウザー 表示例
表　示
















■ 備考

【参考ページ】