CSSで背景色を変更する方法/background-colorプロパティの使い方

スタイルシートを使って要素の背景色を変更する方法のご紹介です。

CSSで背景の色を変える方法

background-colorプロパティを任意の色に変更すれば、背景の色を変えることができます。

たとえばこんな感じのdivを用意して、class名を”haikei”と名付けます。

<！-- html -->
<div class="haikei"></div>

このdivに対して、次のようなスタイルをCSSで指定してあげることにします（サイズがないと背景の色を変えても表示されないので、仮にheightとwidthで高さ/幅を指定しています）

//css
.haikei{
height: 50px; 
width: 100px; 
background-color:red;
}

するとこうなります。

高さや幅を指定せずにbackground-colorだけを指定すれば文字の背景色を変えることもできます。

<！-- html -->
<span class="mojihaikei">文字の背景色を変える</span>

//css
.mojihaikei{
background-color:#caf481;
}

bodyに指定すれば画面全体の背景色を変えることも可能です。色の探し方については、「色　見本」「カラーコード」などで検索すると多くの情報を得ることが可能です。