CSS辞典 background-colorプロパティの解説

背景色を指定する「background-color プロパティ」の使用方法を記載

対応バージョン：CSS3／2.1

対応ブラウザ
概要・使用方法
- 指定できる色
- サンプルコード

対応ブラウザ

初期値	transparent（透明）
適用される要素	すべての要素
モジュール	CSS Backgrounds and Borders Module Level3及びLevel4
継承	あり

概要・使用方法

{ background-color: 色;}

「background-colorプロパティ」は、指定した要素の背景の色を指定します。HTML要素が入れ子になっている場合は、子要素の背景色が優先されます。

色は、背景画像の後ろに配置されます。また、background-clipプロパティが指定されている場合は、背景色の領域はその値に従って切り取られます。

CSS3変更点
colorプロパティと同様にRGB値による指定のほか、HSL値による指定、および透明度のアルファ値を加えたRGBA値またはHSLA値での指定を利用できます。また、キーワードとして、「transparent」と「currentColor」を指定できます。

指定できる色

transparent（初期値）	背景を通過する透明を指定する
色の指定	キーワード、カラーコード、rgb()、rgba()などを指定できる。

CSS辞典色（カラー）の指定方法

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>background-colorプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample1{background-color:red;}
          .sample2{background-color:#ffff00;}
          .sample3{background-color:hsl(60,50%,50%);}     
    </style>
  </head>
  <body>
      <div class="sample1">
          <h1 class="sample2">世界の竹事情</h1>
          <h2 class="sample3">日本では</h2>
          <p>「竹」と一口に言ってもたくさんあり世界には１２００種類の丈があるとも考えられています。
              日本ではそのうち600種類が生息していると言われて、なかでもよく見るのは真竹、孟宗竹、淡竹の3種類です。
          </p>
      </div>
  </body>
</html>

世界の竹事情

日本では

「竹」と一口に言ってもたくさんあり世界には１２００種類の丈があるとも考えられています。日本ではそのうち600種類が生息していると言われて、なかでもよく見るのは真竹、孟宗竹、淡竹の3種類です。

chromeブラウザ実行結果