background-colorで背景色の指定方法

スタイルシートを使用しないで、特定の箇所だけの背景色を指定する場合は、その箇所を<div style="background-color:#色彩の数字;"></div>で囲うと便利です。

例えば、このように記述すると…

<div style="background-color:#EDF7FF;">この箇所は薄い青色で囲んでいます。</div>

このように表示されます。

この箇所は薄い青色で囲んでいます。

このdivの場合はブロック要素になりますので、前後で改行され、そのブロック全体に背景色が設定されますが、特定の箇所の背景色のみを指定したい場合はspan styleを使用します。


例えば、このように記述すると…

この箇所は<span style="background-color:#FFCC00;">黄色</span>で囲んでいます。

このように表示されます。

この箇所は黄色で囲んでいます。

スタイルシート側で指定する場合

けれども、ホームページの背景色などのデザイン的な設定する場合は、htmlに直接記述するのではなく、スタイルシートを使用して一括して指定するというのが一般的です。

この場合、スタイルシート側の該当するdiv要素の箇所に、「 background-color:#色彩の数字; 」を使って指定します。

たとえば、div class="contents"のコンテンツの部分を薄い灰色の背景色にしたい場合、スタイルシートで次のように指定します。

.contents {
background-color:#CCCCCC;
}

この指定する色彩の選び方についてですが、スタイルシートの色彩の箇所でご紹介している無料ツールなどを使いながら、インターネット上でさまざまな色彩を採取してみることをおすすめします。

ホームページのテンプレートやデザインについては著作権がありますが、色彩については、誰さんの何色というような著作権はありませんので、ネット上のサイトをいろいろ参考にされてみてはいかがかと思います。

ちなみに、当ホームページのサイドバーの色彩はこのように設定しています。

個人的な印象では、ホームページの背景色は原色などを使わずに、目の疲れない灰色などを指定しておくのがよいと思います。

次へ:span styleで文字色と背景色の指定方法