【CSS/html】divの背景色を塗りつぶす方法
「CSSを使って塗りつぶしたいけど方法がよくわからない!」
というあなたへdivの背景色を塗りつぶす方法を解説します。
背景を塗りつぶす:background
要素の背景色を塗りつぶすには背景色を指定するCSSであるbackgroundを設定します。
CSSで背景塗りつぶし
<style>
.example{
/*コレ*/background: #52deff;
border: 1px solid #999;
height: 100px;
}
</style>
<div class="example">
CSSで背景塗りつぶし
</div>
backgroundにはカラーコードを指定します。
カラーコードについて詳しくはこちら↓
線を塗りつぶす: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の背景色を塗りつぶす方法でした。