background-colorプロパティ

TOPページに戻る > CSS

background-colorプロパティ

html要素の背景色を指定できます
body要素に背景色を指定するとページ全体の背景色を指定できます
背景色を指定した場合は、文字が見えやすいように文字色を違う色にしましょう

使い方（書式）

セレクタ { background-color: 値;  }                                    

background-colorプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
16進数	#FF9900　#と赤、緑、青の三原色を表す16進数を2桁ずつ並べて色を指定します
16進数（省略）	#FF9900を省略して#F90と指定することもできます
10進数	赤、緑、青の三原色を0から255までの10進数で指定
rgb	rgb(255, 128, 0)　この場合は255が赤の色の指定、128が緑の色の指定、0が青色の指定
色のキーワード	red、green、blue、pinkなど色をキーワードで指定
transparent	背景色を透明に指定する

実際の指定方法

16進数

#と赤、緑、青の三原色を表す16進数を2桁ずつ並べて色を指定します。
16進とは0から9までの数とAからFまでの16の数のこと（解りやすくいえばAが10でFが15、0もあるので15+1＝16個の数）

.hoge { background-color: #FF9900; }

16進数（3桁）

#FF9900を省略して#F90と指定することもできます。

10進数

赤、緑、青の三原色を0から255までの10進数で指定します。
rgbとはred、green、blueの頭文字をとって付けたもの。三原色といって、この組み合わせでいろんな色を表現できる。
この場合は255が赤の色の指定、128が緑の色の指定、0が青色の指定

.hoge3 { background-color: rgb(255, 128, 0); }

パーセンテージ

赤、緑、青の三原色を0%から100%で指定することもできます。

.hoge4 { background-color: rgb(100%, 50%, 0%); }

色のキーワード

red、green、blue、pinkなど色をキーワードで指定します。

.hoge5 { background-color: red; }

html部分

<p class="hoge">16進数 #FF9900</p>
<p class="hoge2">16進数 #F90（3桁）</p>
<p class="hoge3">10進数</p>
<p class="hoge4">パーセンテージ</p>
<p class="hoge5">色のキーワード</p>

実際の表示

16進数 #FF9900

16進数 #F90（3桁）

10進数

パーセンテージ

色のキーワード