色・背景

「background-color」プロパティ

「background-color」プロパティは、要素の背景色を指定するCSSプロパティです。

「background-color」プロパティの値

背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。
背景色を設定し要素を見やすくするために指定します。
※ブラウザの種類により、小数点以下の数値は切り上げされる場合がありますので小数点での指定は推奨できません。
また、「background-color」プロパティと同時に設定が出来るプロパティの種類がいくつかあります。

【プロパティの種類】
・background-color
・background-image
・background-size
・background-repeat
・background-position
・background-attachment
・background-clip
・background-origin
CSSで文字や背景や枠線に色を指定する4つの指定方法

「background-color」プロパティの指定方法

要素の背景色を指定する場合は、「background-color」プロパティを使い適応する値を指定することで実装できます。

「background-color」プロパティ
セレクタ{
background-color;要素の背景色;
}
値例
/* カラー名値(一部) */
background-color: red;/* 赤 */
background-color: orange;/* オレンジ */
background-color: black;/* 黒 */
background-color: blue;/* 青 */
background-color: green;/* 緑 */

/* 16進数カラー値 */
background-color: #FF0000;/* 赤 */
background-color: #ff7200;/* オレンジ */
background-color: #000000;/* 黒 */
background-color: #0000FF;/* 青 */
background-color: #008000;/* 緑 */

/* rgb値 */
background-color: rgb(34, 12, 64);/* 赤 */
background-color: rgb(255, 114, 64);/* オレンジ */
background-color: rgb(0, 0, 0);/* 黒 */
background-color: rgb(0, 0, 255);/* 青 */
background-color: rgb(0, 128, 0);/* 緑 */

/* hsl値 */
background-color: hsl(30, 100%, 50%);/* 赤 */
background-color: hsl(30, 100%, 50%);/* オレンジ */
background-color: hsl(0, 0%, 0%);/* 黒 */
background-color: hsl(240, 100%, 50%);/* 青 */
background-color: hsl(120, 100%, 25%);/* 緑 */

/* hsl値 */
background: url("../img/image.png");/* 背景画像 */
表示例
要素の背景色(赤)
要素の背景色(オレンジ)
要素の背景色(黒)
要素の背景色(青)