ホームへ

CSSで塗りつぶす方法

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

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

背景を塗りつぶす：background

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

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

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

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

CSSでの色（カラーコード）指定方法
Webサイトでは背景色、線の色、文字の色など色（カラーコード）を指定する場面が多々あります。色（カラーコード）の指定方法を3つ紹介します。
この記事を読む

線を塗りつぶす：border

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

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

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

CSS border(枠線)の使い方と種類一覧
CSS borderおよびborderに関連するCSSプロパティの種類一覧を実例とともに紹介します。
この記事を読む

文字部分だけ塗りつぶす：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で塗りつぶす方法でした。

マンガで読める関連記事