マンガでわかるホームページ作成

CSSで塗りつぶす方法

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

というあなたへCSSで塗りつぶす方法を解説します。

背景を塗りつぶす: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で調整しましょう。

【まとめ】CSSで塗りつぶす方法

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

以上、CSSで塗りつぶす方法でした。

関連記事