background-colorプロパティの説明
CSSのbackground-colorプロパティは、要素に背景色を指定します。各要素はボックスモデルに応じた固有の範囲を持ち、その中で前景色と背景色を個別に指定できます。
背景色を塗る範囲の対象は、コンテンツが収まるボックスから枠線の外縁までです。この基準はbackdrop-clipで定義されており、余白の縁に合わせたり文字をくり抜くように変更することも可能です。
色指定に使える値は、colorプロパティと同じく<color>値で定義できるものです。ここで扱えるのは、単一色による塗りつぶしや透明度です。グラデーションは画像扱いになるため、このプロパティでは制御できません。
要素の背景にグラデーションを指定する場合は、画像を取り扱えるbackground-imageか、ショートハンド・プロパティのbackgroundを使用して下さい。それ以外の背景に関する値を一括で指定する場合も、backgroundを使用します。
background-colorに指定できる値
<color>- CSSで使用できる色の指定値で、色々な記述方法が用意されています。背景画像を使用する場合、何らかの理由で画像が表示されなかった場合の代替色にもなります。具体的な書き方を以下に示します。
keyword- 特定の色を表すキーワードです。例えば、赤は
red、青はblueのように名称による指定ができます。表示される色は他の値でも再現できます。一覧はカラーコードを参照して下さい。 - currentColor
- 要素の
colorプロパティの値を参照します。参照先の値が明記されていない場合、継承すべき値が採用されます。 - 16進数値
- 16進数の文字列（0〜9, A〜F）を使った表記です。先頭にシャープ（
#）を置き、６桁または３桁で表現します。透明度を表す場合はアルファチャネルを追加し、８桁または４桁で表現します。例えば、赤を表現する場合、#ff0000または#f00となります。 - RBG値
- 光の三原色（赤、緑、青）の分量を表す
rgb()関数を用いて、sRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。rgba()という古い関数も使用できます。 - HSL値
- 色相（H）、彩度（S）、明度（L）の分量を表す
hsl()関数を用いて、sRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。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: rgb(50% 30% 45%); /* 割合による指定 */
background-color: rgb(0 0 0 / 0.5); /* 透過度の度合い */
background-color: rgb(0 0 0 / 50%); /* 透過度の度合い */
/* HSL 値 */
background-color: hsl(240 100% 50%); /* 不透過の青 */
background-color: hsl(0 0% 0% / 0.5); /* 透過度の度合い */
background-color: hsl(0 0% 0% / 50%); /* 透過度の度合い */
/* 特殊なキーワード値 */
background-color: currentcolor;
background-color: transparent;
/* グローバル値 */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: unset;
background-colorの実例
それでは実際に背景色を指定した要素を見てみましょう。要素は基本的に透明ですが、背景色を指定することで不透明に塗りつぶされます。通常であれば、入れ子の中に書かれた要素が手前に配置されるため、親要素の背景色は重なって見えなくなります。色指定の値は、どの形式であっても概ね同じ色を再現できるので、制作しやすい形式を採用して下さい。
.bg-1 {
background-color: red;
}
.bg-2 {
background-color: #ff9900;
}
.bg-3 {
background-color: rgb(153 255 51);
}
.bg-4 {
background-color: hsl(210 100% 60%);
}
背景色の透過度を変えて半透明にする
カラー値には透過度を表すアルファチャネルが用意されています。この値を用いることで、要素を半透明にして背後に隠れている要素を透過させることができます。背後に隠れた要素に別の色が指定されている場合は、透過した色と合成された結果が画面に表示されます。場合によっては文字が読みづらくなってしまうため、コントラストや配色には気をつけましょう。
16進数でアルファ値を定義する場合は、６桁の数字の末尾に２桁の値を加えます。使用できる値は、0からffで、ffが完全に塗りつぶした状態となります。
rgb()関数やhsl()関数でアルファ値を定義する場合は、スラッシュ（/）で区切った後に透過度を示す数値を追加します。使用できる値は、完全な透明を表す0または0%から、不透明を表す1または100%までの間の数値となります。
.bg-1 {
background-color: rgb(255 255 255 / 80%);
}
.bg-2 {
background-color: rgb(255 255 255 / 60%);
}
.bg-3 {
background-color: rgb(255 255 255 / 40%);
}
.bg-4 {
background-color: rgb(255 255 255 / 20%);
}
背景色にグラデーションを指定するやり方
背景色にグラデーションを指定する場合は、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%);
}