【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

背景色を付ける方法

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;
}

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次