background-color/背景色

background-colorプロパティを使うと背景色を変更出来ます。

説明

 background-colorプロパティは以下のようにボックスで囲った範囲を赤、青、緑等、背景色を指定出来ます。

背景をピンク

 色は3原色を256×256×256まで指定出来るため、掛け合わせると16,777,216色と膨大な色を表現出来ますが、ディスプレイの機種や見る角度でも色合いが変わってきます。

 このため、文字の色と似た色にすると文字が見えにくくなります。

構文

 background-colorプロパティは以下の4つの指定方法があります。又、transparentを指定すると透過します。

background-color: 英語;
background-color: rgb(,,);
background-color: rgba(,,,透明度);
background-color: #16進数;

 英語はredやblue等です。

 rgbは左から赤、緑、青をそれぞれ0〜255で指定し、3色を混ぜた色で表示されます。数字が大きい程薄く、全て255を指定すると白色になり、全て0にすると黒色になります。

 rgbaではrgbの3色に加えて透明度を指定出来ます。透明度はIE8以下ではサポートされていないため透明度は反映されず、色も指定した色と異なって表示されます。

 16進数は上記のrgbをそれぞれ16進数に直した値を繋げて記述します。例えばrgb(2,10,16)と同じ色は#020A10です。RGBの左から2は16進数でも2、10は16進数ではA、16は16進数で10でこれを2桁に直して繋げると020A10になるためです。

 尚、16進数は3桁でも記述出来ます。例えば#22AA33は#2A3と記述出来ます。6桁の左から22が2、AAはA、33は3に対応します。

 6桁の場合はフルカラーと呼ばれ、16×16×16×16×16×16=16,777,216通りの色が表現出来ます。3桁の場合は16×16×16=4,096通りの色が表現出来ます。

英語指定の利用例

 background-colorの英語を指定した利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
background-color: yellow;
}

<div>ホームページ</div>

 上記を表示すると以下になります。

ホームページ

 英語指定が一番簡単に色を指定出来ますが、細かく調整したい場合は不向きです。

RGB指定の利用例

 rgbを指定した利用例は以下の通りです。

div {
background-color: rgb(200,100,20);
}

<div>ホームページ</div>

 上記を表示すると以下になります。

ホームページ

 RGBは指定したい色に対する数字の組み合わせが難しいですが、細かく調整が出来ます。

 又、Excel等を利用すると簡単に確認が出来ます。

 まず、セルを右クリックして「セルの書式設定」を選択すると以下の画面になります。

Excelでの色の確認1

 上記で背景色を設定し、赤枠の「その他の色」をクリックすると以下の「色の設定」画面になります。そこで「ユーザー設定」タブをクリックするとRGBが表示されます。

Excelでの色の確認2

 又、「標準」タブをクリックすると多くの色から選択出来ます。選択した色は「ユーザー設定」のタブでRGBが確認出来ます。

Excelでの色の確認3

透明度の利用例

 rgbaで透明度を利用する例は以下の通りです。

div {
background-color: rgba(200,100,20,0.5);
}

<div>ホームページ</div>

 上記を表示すると以下になります。

ホームページ

 透明度を指定せずに同じ色を表示すると以下になります。

ホームページ

 かなり薄く表示されていると思います。

 透明度は0は透明、1以上は指定しないのと同じになります。

16進数の利用例

 16進数を利用する例は以下の通りです。

div {
background-color: #C86414;
}

<div>ホームページ</div>

 上記を表示すると以下になります。

ホームページ

 上記はrgb(200,100,20)と指定したのと同じ色になります。

関連ページ

・ホームページ作成「ボックスのまとめ

 背景色だけでなく、余白、幅、枠や回り込み等、ボックスの見た目や位置を変える方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)