トップページ > スタイルシートリファレンス > background-color

★スタイルシートリファレンス

background-color …… 背景色を指定する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape4Netscape6Netscape7Netscape8 Opera6Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
広告

background-colorプロパティは、背景色を指定する際に使用します。

背景色を指定する際には、同時に文字色も指定するようにしてください。 ユーザーの環境で文字色が設定されている場合などに、 背景色と文字色が近い色になって文字が読みにくくなってしまうことがあるからです。

■値

#000000などの記述やカラーネームで色指定をします。
transparent
背景色を透明にします。これが初期値です。

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample {
color: #000000;
background-color: #99cc00
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample">
同じ色でも他の色との組み合わせや使用面積によって、イメージが大きく変わります。背景色を決める際のポイントの1つは、そのページ内の他の色との関係を考えてみることです。また、見た目の美しさだけではなく、サイト全体の配色計画と矛盾していないか、文字が読みにくくなっていないか、といった機能面からの考察も大切です。
</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

同じ色でも他の色との組み合わせや使用面積によって、イメージが大きく変わります。背景色を決める際のポイントの1つは、そのページ内の他の色との関係を考えてみることです。また、見た目の美しさだけではなく、サイト全体の配色計画と矛盾していないか、文字が読みにくくなっていないか、といった機能面からの考察も大切です。

■関連項目

color …… 文字色(前景色)を指定する
background …… 背景に関する指定をまとめて行う
background-attachment …… 背景画像の固定・移動を指定する
background-color …… 背景色を指定する
background-image …… 背景画像を指定する
background-position …… 背景画像の表示開始位置を指定する
background-position-x …… 背景画像の横位置を指定する(IE独自の仕様)
background-position-y …… 背景画像の縦位置を指定する(IE独自の仕様)
background-repeat …… 背景画像のリピートの仕方を指定する
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ