今回は、前回やった色付けた段落を
レイアウト通りに「回り込ませる」をやります
回り込みの指定も<head>内に
「float」という命令を使って回り込ませます
headerはそのまま上に置いとけばいいので
headerは何もしません
回り込ませるのは横並びになってる
leftside、mid、rightsideの3つです
とにかくソースを見てみましょう
leftsideの「float:left;」は
leftsideの段落を「左側に回り込ませる」という意味です
midも同じ指定があります
rightsideだけ右側に回り込ませています。
fooderは何も指定しないと勝手に
回り込みの影響を受けて
左側に回り込んだmidの右側
右に回り込んだrightsideの左側
つまりmidとrightsideの間に配置されます
なのでfooderには回り込みを解除する
「clear」を指定して上げます
「both」とは、右・左両方という意味です
これをブラウザで確認すると
という風に、レイアウトの配置ができています
これにmenuという段落を
headerの下に追加したいと思います
ソースはこちら
<style type="text/css">(以後スタイルシート)
新たに追加されている部分が分かりますか?
というわけで今回はレイアウト通りに
段落の回り込みをやりました
後はこれらのサイズを指定してやれば
予定のレイアウトになるはずです
次回は各段落のサイズ指定をやります




