【CSS/html】divの背景色を塗りつぶす方法

「CSSを使って塗りつぶしたいけど方法がよくわからない！」

というあなたへdivの背景色を塗りつぶす方法を解説します。

背景を塗りつぶす：background

要素の背景色を塗りつぶすには背景色を指定するCSSであるbackgroundを設定します。

<style>
.example{
    /*コレ*/background: #52deff;
    border: 1px solid #999;
    height: 100px;
}
</style>
<div class="example">
    CSSで背景塗りつぶし
</div>

backgroundにはカラーコードを指定します。

カラーコードについて詳しくはこちら↓

線を塗りつぶす：border

要素を囲んでいる枠線を塗りつぶす場合はborderを指定します。

<style>
.example2{
    background: #f2f2f2;
    /*コレ*/border: 10px solid #e01c1c;
    height: 100px;
}
</style>
<div class="example2">
    CSSで枠線を塗りつぶし
</div>

borderについて詳しくはこちら↓

文字部分だけ塗りつぶす：spanで囲んでbackground

<style>
.example3{
    background: #f2f2f2;
    border: 1px solid #999;
    height: 100px;
}
.example3>span{
    background: #ffff00;
    padding: 5px;
    display: inline-block;
}
</style>
<div class="example3">
    <span>CSSで文字部分を塗りつぶし</span>
</div>

文字部分だけ塗りつぶしたいなら文字をspanで囲み、それにbackgroundで背景色を指定します。

間隔を調整したいならdisplay: inline-blockを指定しpaddingで調整しましょう。

【まとめ】divの背景色を塗りつぶす方法

• 背景を塗りつぶす：background
• 線を塗りつぶす：border
• 文字部分だけ塗りつぶす：spanで囲んでbackground

以上、divの背景色を塗りつぶす方法でした。