サイドボックスに枠を入れよう

サイドボックスを枠で囲みましょう。

1. 画像を用意

幅150×高さ（サイドボックス内のメニューが収まる高さ）の画像（sidebox_2.gif）を用意します。

2. ソースの書きかえ

「.sideBoxContent」内で背景色が指定されています。この背景色が表示されたままですと、画像を張り付けたとき色に隠れて表示されなくなってしまいますので、背景色の指定をコメントアウトし表示しないようにしましょう。 画像 CSSの506行目「.sideBoxContent」で背景色が「background-color: #ffffff;」と指定されています。これを「/*background-color: #ffffff;*/」と書きかえ上書き保存します

変更前

.sideBoxContent {
	background-color: #ffffff;
	padding: 0.4em;
	}

変更後

.sideBoxContent {
	/*background-color: #ffffff;*/
	padding: 0.4em;
	}

CSSの501行目「.leftBoxContainer」に画像を指定する記述を加えるのですが、今のままでは左サイドボックスしか指定されていません。右サイドボックスも一緒に指定できるようにしましょう。 画像 CSS行目「.leftBoxContainer」に右サイドボックスを指定す「.rightBoxContainer 」 を加えます。

変更前

.leftBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}

変更後

.leftBoxContainer,
.rightBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}

CSSの501行目「.leftBoxContainer,.rightBoxContainer 」に画像を（sidebox_2.gif）指定する「background: url(../images/sidebox_2.gif) left bottom no-repeat;」を加え上書き保存します。

変更前

.leftBoxContainer,
.rightBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}

変更後

.leftBoxContainer,
.rightBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	background: url(../images/sidebox_2.gif) left bottom no-repeat;
	}

4. 確認

ブラウザの更新をクリックし確認します。 画像が表示されました。 それと同時に右のサイドボックスのマージンが左サイドボックスと一緒になりました。 これは「.leftBoxContainer」に内に右サイドボックスを指定したのでマージントップが左と同じように「1.5em」空いたからです。