【CSS】backgroundプロパティで要素に背景色を付ける方法

backgroundプロパティで背景色を指定できる

CSSで要素の背景に色を付けたいときはbackgroundプロパティ、もしくはbackground-colorプロパティを使用します。

基本的な使い方は以下の通り。

/* backgroundプロパティの場合 */
セレクタ {
	background: 指定する色
}

/* background-colorプロパティの場合 */
セレクタ {
	background-color: 指定する色
}

まず以下のようなHTMLのコードがあるとします。

<div class="container"></div>

containerクラスが付与されたdiv要素に対し、縦と横の長さを400pxにして、背景を赤にする場合は以下のCSSを適応させます。

.container {
  width: 400px
  height: 400px
  background: red /* もしくは、background-color: red */
}

これをブラウザで確認すると画像のようになり、containerクラスのdiv要素に赤の背景色が付いたことが分かります。