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

テーマ９．左側メニューを作る２

前ページで左側メニューの作成方法を紹介しました。
しかし、それだけでは期待のレイアウトにはなっていません。
今回は左側メニューのレイアウトを仕上げる方法を紹介します。

＜htmlの記述例＞

＜htmlの説明＞
まずulのすぐ外側に任意のボックスを作ります。
この例ではleftというボックスを作っています。
次に本文を入れる別のボックスを作ります。
この例ではrightというボックスを作っています。
後はleftとrightのスタイルをcssファイルでそれぞれ指定するだけです。

＜cssファイルの記述例＞

＜cssファイルの説明＞
left { width: 130px; }
　管理しやすいように左側メニューのボックスの横幅を指定
　適切でない数字を指定するとレイアウトが崩れる
left { float: left; }
　メニューのボックスを左に配置し、後続の内容を右側に回り込ませる
　（これはテーマ７で出てきましたね）
　この特性のおかげで、メニューの右側に本文のボックスが表示される
right { width: 579px; }
　管理しやすいように本文のボックスの横幅を計算して指定
　適切でない数字を指定するとレイアウトが崩れる
margin-right: 20px;
margin-left: 20px;
　この二行で本文の左右の余白を指定
right { float: left; }
　本文のボックスにもfloatを指定をする
　これがないとレイアウトが崩れる
　この例では、float:right と指定しても同様の効果が得られる
　なお、後続のブロックにおいて注意すべき点がある
　floatによる回り込みを解除しないとレイアウトが崩れる場合がある
　そんな場合は、次のブロックに clear:both を指定すると解除できる
　（これはテーマ１０で出てきますよ）

以上のような方法で、左側メニューを仕上げることができます。