【CSS】「background-color」について解説！【背景色の設定】

CSSの「background-color」の使い方を詳しく知りたい。

この記事はこのような方へ向けて書いています。

この記事を読むことで、これらの知識が得られます。

この記事でサクッと「background-color」について学習しちゃって下さい！

また、下の動画で「background-color」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

「background-color」は何ができるプロパティ？

「background-color」を使うと、要素の背景色の設定ができます。

HTMLの要素に色をつけることで、webサイトを見やすくしたりして、使いやすくすることができますね。

要素の背景色の設定は、webデザインでも基本中の基本ですし、とても重要です。なので、ここでサクッと、使い方をマスターしてください！

実際に使ってみると？

上の様に、「background-color」を使うと、要素の背景色を自由に設定することが可能です！

なるほど！面白いね！

「background-color」に設定できる値は？

「background-color」に設定できる値は下記のようなものがあります。

などがあります。

他にも設定方法はありますが、よく使われるものをこの記事では紹介しますね。

いろいろあるね～。

「background-color」の設定方法！

それでは、「background-color」の設定方法について解説していきます。

分かりやすく、簡単にまとめますね！

「キーワード」を使う方法。

「background-color」には、CSSに用意されている「色を表すキーワード」を使うことができます。

例を挙げると、上のようなものがあります。

このように書けばOKです。

.box {
    background-color: skyblue;
 }

このように書くことで、下のように、要素に色をつけることができます。

簡単に設定できるんだね！

「特殊なキーワード」を使う方法。

CSSで色の設定をする時に使える、下記のような特殊なキーワードもあります。

これらも知っていると便利なので紹介しますね。

.box {
    color: skyblue;
    background-color: currentColor;
 }

このように書くと、「背景色」は「文字色」と一緒になります。

つまり、「currentColor」は、その要素に設定されている「color」プロパティの値を指すということです。

「background-color」に「transparent」と指定すると、背景色は「透明」になります。

「透明」を表したい時は、このキーワードがCSSには用意されていることを思い出してくださいね。

「6桁の16進数」を使う方法。

「background-color」には、「6桁の16進数」を使うこともできます。

.box {
    background-color: #87ceeb;
 }

このように「#」（ハッシュ記号）の後に6桁の「 0～f 」までの16進数を使って色を指定します。

.box {
    background-color: #aabbcc;
    background-color: #abc;
 }

上の2行のコードは同じ意味を表します。

このように短縮して書くこともできます。

色を「6桁の16進数」に置き換えたものを「カラーコード」と言います。

色々なものがあるので、好きなものを覚えておく、みたいなことをしてもいいですね！

「rgb()」を使う方法。

「background-color」には、「rgb()」を使って背景色の設定をすることもできます。

「Red」「Green」「Blue」をどのくらい混ぜるのかを指定することで、色を表す方法です。

それぞれ、「 0 ～ 255 」の整数で指定することが可能です。

書いてみると下のような感じです。

.box {
     background-color: rgb(0, 0, 0);
     background-color: rgb(0 0 0);
 }

まず、「 rgb() 」と書いて、その中に３つの値を書きます。

「Red」「Green」「Blue」のそれぞれの値は、「カンマ区切り」か「半角空白区切り」で書きます。

1つ目の値が「Red」で、

2つ目の値が「Green」で、

3つ目の値が「Blue」です。

今回は全て「０」なので、全体としては「黒」（#000000）になりますね。

逆に、全て「255」なら、「白」（#ffffff）になります。

「rgba()」を使う方法。

「background-color」には、「rgba」を使って背景色の設定をすることもできます。

「Red」「Green」「Blue」に加えて「Alpha」の4つの値を使って色を表現します。

「Alpha」は「 0 ～ 1 」の間の数値で、不透明度を表します。

「０」なら要素は完全に透明で、

「１」なら要素は完全に不透明です。

書いてみると下のような感じです。

.box {
    background-color: rgba(100, 255, 255, 0.5);
    background-color: rgba(100 255 255 / 0.5);
 }

「カンマ区切り」で4つ目の値を追加するか、

「半角空白区切り」と「 / 」（スラッシュ）を使って色を指定します。

このような書き方もありますね！

.box {
    background-color: rgba(100, 255, 255, .5);
    background-color: rgba(100 255 255 / .5);
 }

CSSでは、上のように、整数部分の「０」は省略できるので、これも知っておいてくださいね。

「hsl()」を使う方法。

「background-color」には、「hsl()」を使って背景色の設定をすることもできます。

「Hue」「Saturation」「Lightness」の３つの値を設定することで、色を指定する方法です。

「色相」「彩度」「明度」ですね。

書いてみると下のような感じです。

.box {
    background-color: hsl(180deg, 80%, 60%);
    background-color: hsl(180deg 80% 60%);
 }

「Hue」は「deg」（degree）という単位を使って指定します。色相環の色相を角度によって表現する感じですね。

「Saturation」「Lightness」は、「０％～１００％」で表現します。

「Saturation」は、100% は色の濃さが最大で、 0% は完全に色がありません（無彩色）。

「Lightness」は、100% は白で、 0% は黒です。

また、値は「カンマ区切り」もしくは「半角空白区切り」で書きます。

この辺は、数字でいきなり色を表現するのは難しいと思うので、カラーピッカーなどのツールを使って、直観的に色を選んで指定するのがいいと思います！その方法などは、この記事で後述しますね！

.box {
    background-color: hsl(90, 80%, 60%, 0.4);
    background-color: hsl(90deg 80% 60% / 0.4);
 }

このように、オプションで「Alpha」をつけることもできます！

「hsla()」という、不透明度の設定もできる書き方もあったのですが、これは古い書き方です。

まだ使えると思いますが、新しい上の書き方で書いた方がいいのかなと僕は思います。

「hwb()」を使う方法。

「background-color」には、「hwb()」を使って背景色の設定をすることもできます。

「Hue」「White」「Black」、オプションで「Alpha」を使って色を表現する方法ですね。

「Hue」は「deg」（degree）という単位を使って指定します。色相環の色相を角度によって表現します。

「White」「Black」は「０～１００％」で、「白」と「黒」をどれだけ混ぜるの指定ができます。

「Alpha」は「 0 ～ 1 」の間の数値で、不透明度を表します。

「０」なら要素は完全に透明で、

「１」なら要素は完全に不透明です。

書いてみると下のような感じです。

.box {
    background-color: hwb(270deg 50% 50%);
    background-color: hwb(270deg 50% 50% / 0.5);
}

1つ目の値が「Hue」で、

2つ目の値が「White」で、

3つ目の値が「Black」です。

これら３つは「半角空白区切り」で書きます。

そして、4つ目の値の「Alpha」は「/」（スラッシュ）で区切って書きます。

シンプルだね！

公式定義

「background-color」の公式定義は、下記の通りです。

これについても、知っておいてくださいね。

「background-color」の使用場面は？

「background-color」は、様々なものがありますが、ここで使用場面を少し挙げますね。

などがあるのかなと思います。

構造を見やすくする。

白黒のwebサイトよりも、要素に背景色をつけることで意味を分かりやすくすることも可能です。

ですが無暗に背景色をつけると、逆に見づらくなるので、注意が必要です。

デザインの勉強をしたい方は、下の本を読んでみるといいかもですね！

（こちらはアフィリエイトリンクです。）

ボタンに使う。

申し込みボタンや、ページ遷移のボタンなどに背景色をつけることで、どこを押せばいいのかユーザーに分かりやすくすることも可能です。

上手く背景色をつけることでお洒落にもなるので、試してみてください！

カーソルが乗ったときに背景色を変える。

CSSを使うと、ボタンなどにカーソルが乗ったときに背景色を変えることもできます。

これがボタンだ！ってことを分かりやすくできますね。

デザインを反映させて、印象づける。

そもそも要素に背景色をつけることで、「webサイト」をより多様なデザインにすることができます。

デザイン手法の１つとして、背景色をつけることを検討してみてもいいでしょう！

テキストの情報だけでなく、デザインから受ける印象は、webサイトを作る上で大切な要素だと僕は思います。

背景色を薄くして、背景を透かせる。

背景色を薄くして、背景を透かせることも、デザイン手法の１つとして持っておくといいと思います。

上手く使えば、モダンなwebサイトが作れると思います！

webデザインって楽しそう！

「Google Chrome」でwebページの色の情報を取得する方法。

webページで使われている色の情報を取得するには、上の画像のように、まず、取得したいwebページ上で「右クリック」をしてみてください。

そして、一番下のある、「検証」という欄をクリックしてください。

すると「デベロッパーツール」が開けます。

そこのタブの、一番左の部分をクリックしてください。

クリックしたら、取得したい要素をそのままクリックしてください。

すると、上のように、取得したい色がついている要素が選択できると思います。

そして上のように、その要素についているスタイルがみれる場所があると思います。

そこで、取得したい色の部分をクリックしてください。

すると上のように、色に関する情報がでてきます。

ここで、その要素に使われている「カラーコード」を取得することができますね。

なるほど！

まとめ。

「background-color」を使うと、要素の背景色の設定ができる。

設定できる値は下記のようなものがある。

また、公式定義は下記の通り。

「background-color」には、「linear-gradient()」を使うことでグラデーションがついた色を設定することもできる。

そして、「Google Chrome」でwebページの色の情報を取得することも可能。

また、下の動画で「background-color」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！