★ジャンル別雑文集＆ホームページ作成
＆JavaScriptゲーム★

テーマ１０．左側メニューの背景を下まで表示する

前ページで左側メニューのレイアウトを仕上げる方法を紹介しました。
しかし、メニュー下の背景色と本文の背景色が同じ色になっているはずです。
ダメとは言いませんが、サンプルページとは少しイメージが違いますね。
今回は左側メニューの背景を下まで表示する方法を紹介します。

＜htmlの記述例＞

＜htmlの説明＞
leftとrightを入れる任意のボックスを作ります。
この例ではboxというボックスを作っています。
これによって背景を下まで表示することが可能となるのです。
boxのスタイルはcssファイルで指定しています。
次のブロックでfloatによる回り込みを解除します。

＜cssファイルの記述例＞

＜cssファイルの説明＞
width: 749px;
　管理しやすいように横幅を指定
　適切でない数字を指定するとレイアウトが崩れる
float: left;
　floatは本来は回り込みをさせるものではなく、浮いた状態にさせるもの
　この特性のおかげで、背景を下まで表示することができる
background-image: url("images/bg2.gif");
　背景は実は背景色ではなく、背景画像を読み込ませている
　（背景色を利用しても上手くいかない）
　まずメニューと同じ横幅の画像を作成する（縦幅は適当）
　そしてその画像を事前にアップしておく
　この例ではimagesフォルダにbg2.gifをアップしている
　（これはテーマ２で出てきましたね）
background-repeat: repeat-y;
　画像を縦方向に繰り返す
background-position: left top;
　繰り返しの開始位置を左上に指定
　（これが初期値なので記述がなくてもＯＫ）

これで左側メニュー下の背景の帯ができます。
ここまでくると、学んだ知識を応用することも可能です。

＜応用Ａ．右側メニューにする＞
#leftの float:left を float:right に変えるとメニューが右側に移る
#boxで background-position:right top に変えると背景の帯も右側に移る

＜応用Ｂ．左右両側メニューにする＞
左側メニュー、中央本文、右側メニューの各ボックスを作る
それぞれの横幅を計算してwidthを指定する
それぞれに float:left を指定すると縦三列のレイアウトとなる
（三番目の右側メニューは float:rigth でも構わない）
さらに、三つのボックスを入れる二重のボックスを作る
一つは background-position:left top とし、
もう一つは background-position:right top とすると、
左右両側のメニュー下に背景の帯ができる

このように、応用すれば好みのレイアウトも夢ではありませんね。