TABLEを使わずにどこでも背景画像を指定
ページ全体ではなく、一部分にだけ背景画像や背景色を付けたい場合、どうしますか？
HTMLで背景色を付けるには、TABLEを使って該当部分を囲み、セルに背景画像や背景色を指定するしかありません。しかし、スタイルシートを使えば、そんな工夫をしなくても、手軽に様々な箇所に背景画像や背景色を付けることができます。
今回は、任意の要素に背景画像や背景色を加える方法をご紹介致します。
background-color プロパティ
スタイルシートで背景色を指定するには、background-colorプロパティを使います。
background-color: pink;
上記の記述は、背景色としてピンク色（pink）を指定しています。
※色の指定は、「yellow」などの色名の他、HTMLで使われる「#ccffcc」といった16進数での指定も可能です。 また、「 rgb(255,192,128) 」や「 rgb(100%,80%,75%) 」のような、赤・緑・青の3要素の割合を数値（0～255）やパーセントで指定する方法も可能です。
HTMLタグに、直接スタイルシートを記述するには、style属性を使用して次のように記述します。
style="background-color: pink;"
例えば、強調したい箇所（ <strong>～</strong> ）に適用したいなら、次のように記述します。
例えば、<strong style="background-color: pink;">この部分を強調</strong>してみます。
すると、この要素内に背景色が付きます。
上記の記述をブラウザで見ると、次のように表示されます。
例えば、この部分を強調してみます。
この例で使用した strong は「インライン要素(※)」ですので、文字のある部分にだけ背景色が付きます。
しかし、次の例のように「ブロックレベル要素(※)」（ここでは div を使用）に適用した場合には、そのブロック全体に対して背景色が付きます。
※「ブロックレベル要素」とは、「見出し」や「段落」など『1つのまとまった領域』を表す要素で、p, div, ul, div, h1～h6 などが該当します。一般的なブラウザでは、前後は改行されます。
※「インライン要素」とは、「文章の一部」など、ブロックレベル要素の中で使用される要素で、a, em, span, strong, sup などが該当します。
<div style="background-color: pink;"> ブロックレベル要素 </div>
上記のように記述すると、次のように表示されます。
ブロック全体に背景色が付いていることがお分かり頂けると思います。
この背景色を指定する background-color プロパティは、多くの要素（HTMLタグ）に適用することができますので、いろいろ試してみて下さい。
なお、「特に何かのタグがあるわけでなく、文章中の一部分にだけ背景色を付けたい」という場合は、span要素（<span>～</span>）を使いましょう。 span要素は、任意の範囲にスタイルを適用するなどの目的に使える汎用インライン要素です。
さて、次に、背景色ではなく背景画像を指定する方法をご紹介致しましょう。
