ホームへ

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

2021年05月22日

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

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

背景を塗りつぶす:background

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

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

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

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

線を塗りつぶす:border

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

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

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

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

CSSで文字部分を塗りつぶし
<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の背景色を塗りつぶす方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ