CSSの背景色を指定するサンプルです。
background-colorプロパティまたはbackgroundプロパティを使用します。
background-color / background プロパティ
| background-color : 値 background : 値 |
| 値 | 説明 |
|---|---|
| 色 | 色を指定します。 |
| 値を継承しない | |
- 初期値は透明(transparent)です。
- 背景色を指定します。
- 以下はMDNのbackground-colorプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/background-color - 以下はMDNのbackgroundプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/background
コード
サンプルのコードです。
3,6行目は、background-colorプロパティを使用しています。
9行目は、backgroundプロパティを使用しています。
<style>
#box1{
background-color:LightSkyBlue;
}
#box2{
background-color:#00BFFF;
}
#box3{
background:rgb(30,144,255);
}
#d1 div{width:200px;height:100px;border:1px solid #000;}
</style>
<body >
<div id="d1">
<div id="box1">background-color:<br />LightSkyBlue</div>
<div id="box2">background-color:<br />#00BFFF</div>
<div id="box3">background:<br />rgb(30,144,255)</div>
</div>
</body>
サンプル
上記コードのサンプルです。
background-color:
LightSkyBlue
LightSkyBlue
background-color:
#00BFFF
#00BFFF
background:
rgb(30,144,255)
rgb(30,144,255)
関連の記事
CSS 背景画像を指定するサンプル(background-image)
CSS 背景画像の繰り返し方法を指定するサンプル(background-repeat)
CSS3 枠線の角を丸くするサンプル(border-radius)
CSS3 ボックスに影をつけるサンプル(box-shadow)
CSS3 文字に影をつけるサンプル(text-shadow)
CSS3 透明度を指定するサンプル(opacity)
CSS3 線のグラデーションのサンプル(linear-gradient)
CSS3 円のグラデーションのサンプル(radial-gradient)