＋ぷちカスタマイズ日記＋Petit Customization Diary

CSSで全てのコンテンツ要素（content）が生成する 背景（background）、枠線（border）、外側の余白（margin）、内側の余白（padding） で構成される領域のことを「ボックスモデル」といいます。
カスタマイズ：ボックス編では、この「ボックスモデル」の仕組みに基づいたカスタマイズをファンブログのスタイルシートと照合しながら説明していきます。
Box model
今回はブログの 背景（html） と コンテナ（#container） の左右枠線 の色の変更の仕方を説明します。
「スタイルシート」の記述を変更しますので、作業の前にバックアップをとっておくことを推奨します。

前回はコンテナ（#container）の左右の枠線の変更の仕方を説明しましたので、今回は背景色の変更の仕方を説明します。コンテナ（#container）にはデフォルトで白い背景色（#FFF）が指定されているのですが、コンテナ（#container）の記述には左右の枠線は記述されていますが、背景（background）の記述がありません。

#container {
	border-left:1px solid #333;
	border-right:1px solid #333;
}

何故、背景（background）の記述がないのに、背景色が指定されているのかを説明しますと、実はこの記述の下の方にもコンテナ（#container ）の記述があり、そこに背景色（background: #FFF;）が指定されているんです。

記事タイトルの属性には、枠線（border）、背景（background）、内側の隙間（padding）、外側の隙間（margin）という ファンブログの背景色を変更してみよう！の冒頭で説明しました「ボックスモデル」の基本的な属性が入っていますので、カスタマイズをしていくことで「ボックスモデル」の仕組みが理解しやすくなると思います。

全ての属性について解説していきますと非常に長い記事になってしまいますので、今回はスタイルを変更しないで簡単に行える、背景、枠線、文字の配色の変更方法を解説します。枠線（border）、内側の隙間（padding）、外側の隙間（margin）につきましては次回の記事に分けて解説していきます。