今回はbackground-colorの使い方についてです。

background-colorは背景の色を決める時に使うCSSプロパティです。サイト制作では背景に色を使うのは数えきれないぐらいよく出てくるので、すぐに覚えられると思いますよ。

スポンサーリンク

background-colorの記述サンプル

では実際にbackground-colorの記述方法を説明します。

いくつか書き方はありますが、今回はその中でも特に使う書き方3つを覚えておきましょう。例ではdiv要素にsample1・sample2とそれぞれクラス名をつけてCSSでbackground-colorの設定をしています。

1. 色の名前で指定する場合

See the Pen background-color1 by handywebdesign (@handywebdesign) on CodePen.


色の指定の仕方のひとつとして、このように色の名前で指定することができます。色の指定は数が限られているので、あまり使うことはありませんが知識の一つとして覚えておくと良いですね。

2. 16進数カラーコードで指定する場合

See the Pen background-color2 by handywebdesign (@handywebdesign) on CodePen.


今度は例1で指定した色を16進数のカラーコードで記述してみました。カラーコードというのは6桁の英数字で成り立っていて、左から2桁ずつ赤・緑・青の数値を表しています。

実際のWeb制作では、このカラーコードを使った記述をすることが一番多いです。Photoshopなどの制作ツールでも色を決める時にカラーコードを見たことがある方は多いと思います。

表現できる色数もすごく多いので色を使った表現が広がりますよ。

3. RGBで指定する場合

See the Pen background-color3 by handywebdesign (@handywebdesign) on CodePen.


同じ色を今度はRGBで指定する書き方です。RGBはカラーコードと同じくPhotoshopなどで色を決める時に出てきますね。

RGBというのはR(レッド)G(グリーン)B(ブルー)の3色を混ぜて色を表現する手法のことです。Webの世界ではRGB、DTP(印刷)の世界ではCMYKを使います。

background-colorまとめ

CSSでbackground-colorを使うと、紹介した例のように特定のエリアに背景色を設定することができます。

今回はdiv要素を対象としてみましたが、テキストの背景色としても指定することもできるので、強調したいテキストの背景色を変える、といった使い方もよく見かけます。

というわけでbackground-colorプロパティの使い方についてでした。