background-colorプロパティの説明
CSSのbackground-colorプロパティは、要素に背景色を指定します。色指定で使える値は、colorと同じく<color>値で定義できるものです。ここで扱えるのは、単一色による塗りつぶしや透明度です。グラデーションは画像扱いになるため、このプロパティでは制御できません。
背景にグラデーションを指定する場合は、画像を取り扱えるbackground-imageか、ショートハンド・プロパティのbackgroundを使用して下さい。それ以外の背景に関する値を一括で指定する場合も、backgroundを使用します。
background-colorに指定できる値
<color>- CSSで使用できる色の指定値で、色々な記述方法が用意されています。背景画像を使用する場合、何らかの理由で画像が表示されなかった場合の代替色にもなります。具体的な書き方を以下に示します。
keyword- 特定の色を表すキーワードです。例えば、赤は
red、青はblueのように名称による指定ができます。表示される色は他の値でも再現できます。一覧はカラーコードを参照して下さい。 - currentColor
- 要素の
colorプロパティの値を参照します。参照先の値が明記されていない場合、継承すべき値が採用されます。 - 16進数値
- 16進数の文字列（0〜9, A〜F）を使った表記です。先頭にシャープ（
#）を置き、６桁または３桁で表現します。透明度を表す場合はアルファチャネルを追加し、８桁または４桁で表現します。例えば、赤を表現する場合、#ff0000または#f00となります。 - RBG値
- 光の三原色（赤、青、緑）の分量でsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文は
rgb()またはrgba()です。 - HSL値
- 色相（H）、彩度（S）、明度（L）の各成分によって与えられたsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文は
hsl()またはhsla()です。 - システム色
- ブラウザ側で用意してあるパレットを呼び出す祭に指定します。システム色はベンダーが公開しているキーワードを使います。ただし、全てのブラウザが対応しているわけではないので、使用する場面は限定的です。
background-colorの使い方とサンプルコード
background-colorプロパティの構文は以下の通りです。
/* キーワード値 */
background-color: cyan;
background-color: magenta;
background-color: yellow;
background-color: black;
/* 16進数値 */
background-color: #ffffff; /* 不透過 */
background-color: #fff; /* 不透過の短縮形 */
background-color: #ffffffaa; /* アルファ値の追加 */
background-color: #fffa; /* アルファ付きの短縮形 */
/* RGB 値 */
background-color: rgb(255, 255, 255); /* 不透過の白 */
background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
/* HSL 値 */
background-color: hsl(240, 100%, 50%); /* 不透過の青 */
background-color: hsla(0, 0%, 25%, .5); /* 半透明の灰色 */
/* 特殊なキーワード値 */
background-color: currentcolor;
background-color: transparent;
/* グローバル値 */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: unset;
background-blend-modeの実例
それでは実際に背景色を指定した要素を見てみましょう。それぞれの色は、別の表記による再現が可能です。どの表記であっても同様の色を指定することが可能なので、制作しやすい形式を採用して下さい。
#bg_1 {
background-color: #ff0000;
}
#bg_2 {
background-color: #f004;
}
#bg_3 {
background-color: rgb(255, 255, 255);
}
#bg_4 {
background-color: hsl(36, 100%, 50%);
}
#bg_5 {
background-color: hsla(118, 42%, 52%, .5);
}
背景にグラデーションを指定するやり方
要素の背景にグラデーションを指定する場合、background-colorに直接記述することはできません。なぜなら背景のグラデーションは画像扱いになるからです。要素の背景にグラデーションを表示させたい場合は、画像を取り扱えるbackground-imageかbackgroundを使用して下さい。
#bg_1 {
background: linear-gradient(cyan, magenta);
}
#bg_2 {
background: linear-gradient(to right, cyan, magenta);
}
#bg_3 {
background: linear-gradient(to bottom right, cyan, magenta);
}
#bg_4 {
background: linear-gradient(45deg, cyan, magenta);
}
#bg_5 {
background: linear-gradient(#f00, #ff0, #cf0, #0f0, #0cf, #00f);
}
#bg_6 {
background: linear-gradient(#ff0, 75%, #0ff);
}
#bg_7 {
background: linear-gradient(#ff0, 25%, #0ff);
}
#bg_8 {
background: linear-gradient(#ff0 50%, #0ff 50%);
}