本記事では、CSSで背景色を付けるbackground-colorプロパティの使い方について解説しています。
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著: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;
}
