ywork2020.com

Title

要素の背景色を指定する

目次 (INDEX)

background-colorプロパティの概要

background-colorは次の単語から命名されたプロパティです。
background
読み: バックグラウンド
意味: 背景
color
読み: カラー
意味: 色

このプロパティはHTML要素の背景色を設定するためのプロパティです。

色の指定にはW3Cで指定されたカラー文字の他に16進数やRGBコードを使用することができます。
このプロパティで設定した色は、要素のボックス内容領域、パディング領域、ボーダー領域に適用されますが、 マージン領域には適用されず、透明になります。

また、背景色を指定していない要素の背景は初期値で透明となっているので、親要素に背景色を設定した場合は、 その色が透過されて表示されることになります。

目次に戻る

実機サンプルとサンプルコード

要素の背景色を指定するためにdiv要素をサンプルとして説明をしていきたいと思います。

構文

セレクター{background-color: 設定値;}
※background-color : 設定値; の「:」コロンの文字は「=」イコールという意味があります。

目次に戻る

初期値: transparent

transparent とはトランスペアレントと読み、「親を通過する」という意味になります。 つまり親の背景色が通過するということになり、透明色を意味します。 このサンプルでは子要素にtransparentを設定してみます。

親のdiv要素
子のdiv要素

div{background-color: transparent;}

目次に戻る

W3C基本色で背景色を指定する

W3C とはWorld Wide Web Consortiumの略称です。 Web技術の標準化を行う非営利団体の名称です。ここではW3Cで標準化されているカラーの名称で背景色の設定を黄色にしてみます。

div要素
div{background-color: yellow;}
色の名称については、色見本 (カラーサンプル) を参考にして下さい。

目次に戻る

16進数で背景色を指定する

16進数 とは私たちが普段、数学などで使っているアラビア数字の0~9にA~Fを付け加えた数字です。 アラビア数字は0から数えて9の次の10で位が上がりますが、16進数では9の次からABCDEFと数えていき、最後のFが16番目の 数字となります。つまりFはアラビア数字でいうところの15を表すことになります。

16進数で色を表す場合はカラーコードの先頭に「#」を付けます。

色の指定方法は #XXYYZZ を例とすると XXの部分が赤色の明るさ, YYの部分が緑色の明るさ, ZZの部分が青色の明るさ の形式で 0~F の数字をあてはめて指定します。 なお、指定した数字が大きいほど、明るくなります。

それでは16進数を使って前項と同じく、背景色を黄色にしてみます。

div要素
div{background-color: #FFFF00;}
16進数についての補足

16進数で色を指定する場合には2種類の書き方があります。#000と#000000はどちらも16進数のカラーコードです。 #000は16進数のカラーコードの短縮系となり、指定できる色の幅が少し大雑把になります。

カラーコードに大文字と小文字の区別はありませんので、例えば#FFFと書いても#fffと書いても同じ意味になります。

色ついては、色見本 (カラーサンプル) を参考にして下さい。

目次に戻る

RGB関数で背景色を指定する

RGB とはRed,Green,Blueの頭文字をとったもので赤と緑と青の色の混合比を使って色を指定します。 この考え方は16進数で色を指定する場合と同じです。

rgb( , , ) の形式で色の部分に0~255の数値を当てはめます。大きい数値ほど、その系統色が明るく表示されます。

それではRGBを使って背景色を緑色にしてみます。

div要素
div{background-color: rgb(0, 255, 0);}

目次に戻る

RGBA関数で背景色を指定する

RGBA とはRed,Green,Blue,Alphaの頭文字をとったもので前項で挙げたRGBに透過度であるAlpha値を指定することができます。

rgba( , , , 透過率) の形式で色の部分に0~255の数値を当てはめます。大きい数値ほど、その系統色が明るく表示され、 かつ、透過度を設定することで指定した色に透明度を設定します。

それでは検証として、2つのdiv要素を使って「子のdiv要素」に対してRGBAで背景色を緑色にして、かつ透明度を70%にしてみます。

親のdiv要素
子のdiv要素

div{background-color: rgba(0, 255, 0, 0.3);}
透過率の補足

透過率は0を指定すると100%透過している状態で、1を指定すると0%の透過率を表します。つまり0~1の間の小数点付の実数値で指定するわけですが、 言葉の表現としては「べた塗り率」と言った方が理解しやすいかもしれません。

目次に戻る

プロパティの補足

  • すべての要素に適用可能
  • 親要素から値を継承しない

目次に戻る