こんにちは！たく丸です。
今回は、CSSで背景色を指定する方法をご紹介します。

背景はWebページの中で占める面積が広いため、サイト全体の印象を大きく左右します。
CSSを使えば、単色の背景色はもちろん、グラデーションも簡単に設定できます。

目次

背景の基本：backgroundプロパティ

背景を装飾するには、CSSのbackground関連のプロパティを使います。

・background-color：背景色（単色）

・background-image：背景画像やグラデーション

・background：上記をまとめて指定できるショートハンド

何も指定しなければ背景は透明（通常は白く見える）になります。背景に薄く色を入れるだけでも、サイトの見栄えがグッと良くなりますよ。

背景色を指定する（単色）

まずはシンプルな単色の背景色です。

.box {
  background-color: #e0f2fe;
}

色の指定方法は、カラーコード（#e0f2fe）、色名（skyblue）、rgb()、hsl()などが使えます。
透明度をつけたい場合は rgb(14 165 233 / 0.3) のように指定します。

See the Pen
NWqGpJY by TAKUYA (@fukutaku)
on CodePen.

背景色を指定するときの注意点は2つです。
1. 背景色は画面全体ではなく、指定した要素に対して入る
2. 要素に中身や高さがないと、背景色が見えない

1. 指定した要素に背景色が入る

See the Pen
指定した要素に背景色を入れる by TAKUYA (@fukutaku)
on CodePen.

外側の要素「background-red」には赤、内側の要素「background-blue」には青を指定しています。このように、要素ごとに背景色を設定できます。

ページ全体に背景色を入れたい場合は、bodyに指定しましょう。

2. 中身がない要素には背景色が見えない

See the Pen
背景色（要素なし） by TAKUYA (@fukutaku)
on CodePen.

中身がないと要素の高さが0になるため、背景色が表示されません。
中身なしで背景色を見せたい場合は、min-heightやpaddingで高さを確保しましょう。

.hero {
  min-height: 300px;
  background-color: #fef3c7;
}

背景にグラデーションを入れる方法

グラデーションはbackground-image（またはbackground）に、グラデーション関数を指定して作ります。
現在の主要ブラウザでは、-webkit-などのベンダープレフィックスは不要です。

1. 上から下へのグラデーション

.box {
  background: linear-gradient(#38bdf8, #6366f1);
}

See the Pen
上から下へのグラデーション by TAKUYA (@fukutaku)
on CodePen.

linear-gradient()は、何も指定しなければ上から下へ色が変化します。

2. 左から右（斜め）へのグラデーション

.box {
  /* 左から右へ */
  background: linear-gradient(to right, #38bdf8, #6366f1);
}
.box2 {
  /* 角度で指定（45度） */
  background: linear-gradient(45deg, #f472b6, #facc15);
}

See the Pen
横からグラデーション by TAKUYA (@fukutaku)
on CodePen.

「to right」「to bottom right」などの方向や、「45deg」のような角度で向きを指定できます。

3. 3色以上のグラデーション

.box {
  background: linear-gradient(to right, #f87171 0%, #facc15 50%, #4ade80 100%);
}

See the Pen
qBdbVPV by TAKUYA (@fukutaku)
on CodePen.

色をカンマ区切りで並べると、3色以上のグラデーションになります。「%」で各色の位置を指定すれば、色の幅も調整できます。

4. 円形（放射状）のグラデーション

.box {
  background: radial-gradient(circle, #fde68a, #f97316);
}

radial-gradient()を使うと、中心から外側へ広がるグラデーションになります。

5. 円すい状のグラデーション

.box {
  background: conic-gradient(#f87171, #facc15, #4ade80, #60a5fa, #f87171);
}

conic-gradient()は、中心の周りを回るように色が変化します。円グラフ風のデザインにも使えます。

文字の読みやすさにも注意

背景色やグラデーションの上に文字を置く場合は、背景と文字のコントラストを十分にとりましょう。読みにくいと、せっかくのデザインも逆効果になってしまいます。

まとめ

今回は、CSSで背景色を指定する方法をご紹介しました。

・単色はbackground-colorで指定する
・グラデーションはlinear-gradient、radial-gradient、conic-gradient
・中身がない要素はmin-heightなどで高さを確保する

背景を上手に活用して、センスのあるサイトに仕上げていきましょう！