CSS: background-color 背景色を指定する

CSS で要素の背景色を指定する場合は、background-color プロパティを使用します。 このプロパティはブロックレベル、インラインレベルのすべての要素に適用できます。

指定した色は、ボックスの内容領域、パディング領域、ボーダー領域に適用され、 マージン領域は透明となります。

background-color プロパティの使用例


background-color: red;
background-color: #ffff;

値として色を指定する場合はRGB値や色名で指定します。 「transparent」を指定した場合は透明となり、親要素の背景が透けて見えます。

背景色を指定するサンプルコード

下のサンプルでは、div 要素(ブロックレベル)、span 要素(インラインレベル)の background-color プロパティを指定しています。

この文章はサンプルです。
文字の大きさ、量、字間、行間等を確認するために入れています。


<div class="sample1">
    この文章はサンプルです。<br>
    <span class="sample2">文字の大きさ</span>、量、字間、行間等を確認するために入れています。
</div>

<style>
    div.sample1{
        background-color: beige;
    }
    span.sample2 {
        background-color: yellow;
    }
    
</style>

HTML・CSS入門