HTML の 要素 に 背景色 を設定する ～CSS background-color: カラーコード;～

目的

• HTMLファイルのブロック要素の背景色を設定する方法をまとめる

押さえるポイント

• 背景色を変えたい要素をCSSで指定して色を付ける。
• background-colorプロパティを使用する。
• 色の指定にはカラーコーかRGBの値を用いて指定する。
  ※カラーコード・・・色を表すRGB値を十六進法で表記した文字列の事
  ※カラーコードの見本はこちらで確認できます。

書き方の例(CSS)

要素の名前かクラス名 {
    /* カラーコードで背景色を指定する */
    background-color: カラーコード;
    /* rgbで背景色を指定する */
    background-color: rgb(XXX, XXX, XXX);
}

より具体的な例

HTMLのdiv要素であるHello Worldに赤色の背景色を設定する場合。

～サンプルコード～

• 下記にHTMLファイルの内容を記載する。

   <div>Hello World</div>

• CSSで上記のHTMLファイルのdiv要素の背景色を赤色にする設定を行う。
  
• 下記にCSSファイルの内容を記載する。

   div {
       /* 単純な色だとredなどの文字でも指定できる */
       background-color: red;
   }