HTML/CSS

CSSで背景色を付ける方法(background-color)

本記事では、CSSで背景色を付けるbackground-colorプロパティの使い方について解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

背景色を付ける方法

CSSで背景色を付けるには、background-colorプロパティを使います。

/* キーワード指定 */
div {
  background-color:red;
}

/* 16進数指定 */
div {
  background-color:#f00;
}

/* RGB */
div {
  background-color:rgb(255,0,0);
}

background-colorプロパティの値には、テキストの色を変更する時に指定する16進数やRGBなどを設定します。

注意点として、background-colorプロパティを指定する要素がブロック要素・インライン要素・インラインブロック要素によって表示される背景色の大きさが異なります。

ブロック要素の場合

背景色を付ける要素がブロック要素の場合、対象要素または親要素に幅(width)が設定されている幅いっぱいに表示されます。どちらにも幅が設定されていない場合は、画面幅いっぱいに背景色が表示されます。

<div class="block1">
  <p>画面幅いっぱい</p>  
</div>
<div class="block2">
  <p>親要素の幅に合わせる</p>  
</div>
div {
  text-align:center;
  color:#fff;
}

.block1 {
  background-color:#f00;
}

.block2 {
  max-width:80%;
  margin:0 auto;
  background-color:#f00;
}

インライン要素またはインラインブロック要素の場合

背景色を付ける要素がインライン要素またはインラインブロック要素の場合、対象要素と同じ幅の背景色が表示されます。

<div>
  <span class="inline">インライン要素</span>
  <br>
  <span class="inline-block">インラインブロック要素</span>
</div>
div{
  text-align:center;
  color:#fff;
}

.inline{
  background-color:#f00;
}

.inline-block{
  display:inline-block;
  background-color:#f00;
}

背景色を透過させる方法

背景色を投下させたい時は、カラー指定でrgba()を使います。通常のrgb()との違いは第4引数に不透明度を表す数値を指定することが出来ます。数値は0〜1の間にある数値を指定することができ、数値が0に近づくほど透明になり1に近づくほど不透明になります。

<div class="tr-1">
  <p>透過なしの背景色</p>
</div>
<div class="tr-07">
  <p>第4引数に0.7指定</p>
</div>
<div class="tr-04">
  <p>第4引数に0.4指定</p>
</div>
<div class="tr-01">
  <p>第4引数に0.1指定</p>
</div>
div{
  text-align:center;
}

.tr-1{
  background-color:rgba(255,0,0,1);
}

.tr-07{
  background-color:rgba(255,0,0,0.7);
}

.tr-04{
  background-color:rgba(255,0,0,0.4);
}

.tr-01{
  background-color:rgba(255,0,0,0.1);
}

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村