ホームページ(Webサイト)の印象を左右する背景色の設定は、CSSにおいて必須の基本スキルの一つです。
単純に画面全体の背景色を設定するだけでなく、要素を指定して色を付けることもできるので、デザインの幅が大きく広がります。
ここでは、CSSで背景色を設定する方法や、背景色がうまく反映されないときの対処方法について解説します。
Contents
背景色を設定する方法
CSSで背景色を設定するときは、background-colorプロパティを使用します。
| 要素 { background-color: 色の指定; } |
※HTML5より前のバージョンでは、body要素やtable要素にbgcolorプロパティを指定して背景色を設定することができましたが、HTML5で廃止されたため現在は使用できません。
| <body bgcolor=”blue”>コンテンツの内容</body> |
プロパティ値に設定する背景色は、RGB値やキーワードなど、いくつかの形式があります。
| 種類 | 説明 | 設定値のサンプル |
| キーワード | CSSであらかじめ定義されている色名をキーワードで指定する | red, blue, black, lightseagreen ※使用可能なキーワード一覧 |
| 16進数カラーコード | 色を赤・緑・青（RGB）の3色の割合で表現し、それぞれを16進数で指定する | #000000（黒） #FF0000（赤） #FFFFFF（白） |
| RGB | 考え方はカラーコードと同じで、赤・緑・青（RGB）を0〜255の数値で指定する | rgb(0, 0, 0)（黒） rgb(255, 0, 0)（赤） rgb(255, 255, 255)（白） |
次のCSSはすべて同じ色（赤）を指定しています。
例）style.css
| .c1 { background-color: red; } .c2 { background-color: #FF0000; } .c3 { background-color: rgb(255, 0, 0); }div { width: 100px; height: 100px; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <span> red <div class=”c1″></div> </span> <span> #FF0000 <div class=”c2″></div> </span> <span> rgb(255, 0, 0) <div class=”c3″></div> </span> </body> </html> |
ブラウザでの表示結果
キーワードで指定する方法が最もシンプルですが、指定できる色には限りがあります。実際のWEB制作の現場では、デザインどおりの細かい色を再現するために16進数カラーコードがよく使用されています。
(1)ページ全体の背景色を変更する
ページ全体の背景色を変更するには、HTMLの最も外側の要素であるbodyタグに対して背景色を指定します。bodyタグにはブラウザ標準の余白が設定されているため、margin:0px; を合わせて指定すると隙間なく背景色を適用することができます。
例）style.css
| body { margin: 0px; background-color: darkgrey; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <span>ページ全体の背景をdarkgreyに設定</span> </body> </html> |
ブラウザでの表示結果
(2)特定の範囲だけ背景色を変更する
background-colorは画面全体だけでなく、特定の要素に対しても指定可能です。divやpなどのブロック要素、spanやaなどのインライン要素のどちらにも背景色が指定できます。
例）style.css
| .c1 { background-color: blue; } .c2 { background-color: yellow; } .c3 { background-color: aqua; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div class=”c1″>div要素の背景色をblueに設定 <p class=”c2″>p要素の背景色をyellowに設定</p> <span class=”c3″>span要素の背景色をaquaに設定</span> </div> </body> </html> |
ブラウザでの表示結果
CSSの擬似要素を使うと、特定の要素の一部分にのみ背景色を指定できます。
CSSの擬似要素とは、HTMLの要素をCSSで擬似的に設定する方法です。HTMLを変更することなく、要素の一部だけにスタイルを適用できるため、シンプルなHTML構造を保ったままで自由度の高いデザインが可能になります(擬似要素は別の記事で詳しく解説します)。
例）style.css
| .c1::after { content: “”; position: absolute; top: 0px; right: 0px; width: 50%; height: 100%; background-color: cadetblue; z-index: -1; } .content { padding: 50px 0px; text-align: center; background-color: silver; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div class=”c1″>div要素の右半分の背景色をcadetblueに設定 <div class=”content”>内容</div> </div> </body> </html> |
ブラウザでの表示結果
CSSの擬似要素とは、HTMLの要素をCSSで擬似的に設定する方法です。HTMLを変更することなく、要素の一部だけにスタイルを適用できるため、シンプルなHTML構造を保ったままで自由度の高いデザインが可能になります(擬似要素は別の記事で詳しく解説します)。
(3)テーブル内で背景色を設定する
table要素を使用してテーブルを作成したとき、テーブル全体や特定の行、あるいは特定のセルに対して個別に背景色を設定できます。
テーブル全体に背景色を設定する場合はtable要素、特定の行のみの場合はtr要素、特定のセルのみの場合はtd要素に対してbackground-colorプロパティを設定します。
例）style.css
| table,td { border: 1px solid black; }table.bg_table { background-color: lavender; }tr.bg_tr { background-color: lightsteelblue; }td.bg_td { background-color: steelblue; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <table class=”bg_table”> <tr> <td>1行目の1番目セル</td> <td>1行目の1番目セル</td> </tr> <tr class=”bg_tr”> <td>2行目の1番目セル</td> <td>2行目の1番目セル</td> </tr> <tr> <td>3行目の1番目セル</td> <td class=”bg_td”>3行目の2番目セル</td> </tr> </table> </body> </html> |
ブラウザでの表示結果
(4)特定の要素だけ画面幅いっぱいに背景色を設定する
ページ全体の背景色を変更する方法は冒頭に解説しましたが、特定の要素だけ画面幅いっぱいに設定する方法もあります。
例）style.css
| body { margin: 0px; } .content1 { width: 50%; background-color: lightcoral; } .content2 { background-color: mediumseagreen; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div class=”content1″>幅が固定されたコンテンツ</div> <div class=”content2″>画面いっぱいに背景色を設定するコンテンツ</div> </body> </html> |
ブラウザでの表示結果
body要素に指定しているmarginは、要素の外側の余白を調整するためのプロパティです。
ブラウザ側のデフォルト設定で、body要素に対して8px〜のmarginが設定されている場合があり、通常は要素を画面いっぱいに広げようとしてもmargin分の余白ができてしまいます。
そのため、body要素に「margin: 0px;」を指定して余白がない状態にする必要があります。
HTML側では、背景色を設定したい要素の外側（親要素）に固定幅を指定しないよう注意してください。画面いっぱいに背景色を広げることができなくなります。
例）style.css
| body { margin: 0px; } .content1 { width: 50%; background-color: lightcoral; } .content2 { background-color: mediumseagreen; } .content2_parent { width: 80%; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div class=”content1″>幅が固定されたコンテンツ</div> <div class=”content2_parent”> <div class=”content2″>画面いっぱいに背景色を設定するコンテンツ</div> </div> </body> </html> |
ブラウザでの表示結果
背景の表示範囲を設定する方法
background-clipプロパティを使用すると、背景の範囲を指定できます。プロパティに指定できる値は次のとおりです。
| 値 | 背景画像の表示領域 |
| border-box | borderの外側まで背景を表示します。 |
| padding-box | paddingの外側（borderの内側）まで表示します。 |
| content-box | コンテンツの外側（paddingの内側）まで表示します。 |
| text | テキストの部分のみ表示します。 |
今回の例では背景に画像を使用するため、以下の画像をRaptureなどのソフトで画面をキャプチャし、「bg.png」というファイル名称で保存し、HTML、CSSと同じ階層のフォルダに配置してください。
例）style.css
| .test { border: 10px dashed rgba(30,30,30,0.5); /* 透過率を50%に設定 */ background-image: url(bg.png); /* 今回は背景画像を指定 */ width: 300px; height: 300px; margin: 20px; padding: 10px; font-size: 25px; font-weight: bold; }.border_box { background-clip: border-box; }.padding-box { background-clip: padding-box; }.content-box { background-clip: content-box; }.text { background-clip: text; color: transparent; /* 文字を透明にして背景画像を透けさせる */ } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div class=”test border-box”> border-box </div> <div class=”test padding-box”> padding-box </div> <div class=”test content-box”> content-box </div> <div class=”test text”> text </div> </body> </html> |
ブラウザでの表示結果
背景色が変わらないときの原因と対応方法
CSSでbackground-colorを指定しても背景色が変わらない場合、次のような原因が考えられます。
(1)要素に幅や高さが指定されていない
(2)CSSの優先順位が低い
(1)要素に幅や高さが指定されていない
特に起こりやすいのが、幅や高さの指定忘れです。
背景色が表示される条件は、要素に面積がある＝幅×高さが0より大きいことです。背景色を指定した要素の幅（width）か高さ（height）が0になっていると、背景色は表示されません。
ただし、HTMLの要素は基本的にコンテンツ（要素の中身）によってサイズが決まるので、テキストなどのコンテンツがあればCSSで幅や高さを指定しなくても背景色が表示されます。
例）style.css
| div { background-color: red; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div></div> <!– 要素の中身が空なので、幅も高さも0 –> </body> </html> |
ブラウザでの表示結果（背景色が表示されない）
例）style.css
| div { background-color: red; width: 50%; height: 30%; } |
ブラウザでの表示結果（背景色が表示される）
例）style.css
| div { background-color: red; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div>要素の中身</div> </body> </html> |
(2)CSSの優先順位が低い
CSSのスタイルが適用される順番には優先度があり、例えば以下のルールが定められています。
● セレクタの種類での優先度
○ id > class > type（pやh1などの要素に対して指定）
そのため、優先度の高いセレクタで背景色が指定されていると、指定した背景色が表示されないことがあります。
例）style.css
| #sample_1 { background-color: yellow; } .sample_2 { background-color: red; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div id=”sample_1″> <div class=”sample_2″> CSSの優先順位が高い方の背景色が表示される </div> </div> </body> </html> |
ブラウザでの表示結果
!importantは、CSSの優先順位を無視して強制的に適用するための宣言です。先ほどの例で優先度の低いスタイルに!importantを指定すると、次のような結果になります。
例）style.css
| #sample_1 { background-color: yellow; } .sample_2 { background-color: red !important; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div id=”sample_1″> <div class=”sample_2″> CSSの優先順位が高い方の背景色が表示される </div> </div> </body> </html> |
や
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div id=”sample_1″> <div class=”sample_2″> CSSの優先順位が高い方の背景色が表示される </div> </div> </body> </html> |
ブラウザでの表示結果
