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

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

けれども、ホームページの全体の背景色を設定する場合は、スタイルシートで一括して指定するというのが一般的です。

スタイルシートの該当するdiv要素に、「 background-color:#色彩の数字; 」を使って指定します。画像素材をリピートして背景を指定することもできますが、暖色系のシンプルな色彩を設定しておくとわりと簡単です。

たとえば、当ホームページサンプルテンプレートで、「左サイドバーの背景色を白に設定したい」場合は、スタイルシートの対応箇所に次のように指定します。

#howtohomepage {
background-color:#ffffff;
}

これは、「左サイトバーとして指定している、howtohomepage というdiv要素の領域の背景色を白(#ffffff)で表示してください」という意味です。どの要素がどの箇所に対応するのかについては、こちらのページに、、

サンプルHPのレイアウト構成

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

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

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

個人的な印象では、ホームページ全体の背景色(bodyの部分)だけに色彩を設定し、ひとつ内側のコンテンツがはじまる部分(当サイトではhomepageの部分)に、白を設定しているサイトが多いようです。

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