背景に色を指定するbackground-colorプロパティ
background-color

 背景に色を指定する際に使います。16進法のRGB値を使って指定することがほとんどです。そのほかに、決められた色名(red)などで指定することも可能ですが、自由度が低くおすすめできません。

 また、デフォルトの値では「trasparent(透明)」が適用されています。そのため、親要素の背景色が透けて見えてしまうので、テキストなどを入力して表示させる際は、可読性が落ちないように、明度や彩度、色などを調節する必要があります。

基本データ

構文 セレクタ{background-color:値;}
継承 ×
キーワードを使って指定する場合
色(16進数RGB値、色名)、transparent
親から継承させる場合
inherit
効果 要素の背景色を指定できる
初期値 transparent
適用箇所 すべての要素

ほげほげですね。

p { background-color: #ccc;}

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.backgroundColor

jQueryを使った参照方法

$('【セレクタ】').css('background-color','【値】');
$('【セレクタ】').css({'background-color':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間