Webデザイナーブログから学ぶホームページ制作

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

背景に関するすべてを指定する値は「カラー名」「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: 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");/* 背景画像 */