ホームページを作る(回り込み) | えてモン吉の趣味日記

えてモン吉の趣味日記

いろんな遊びを探索することで何とか生き延びてるおさるのブログです。

今回は、前回やった色付けた段落を

レイアウト通りに「回り込ませる」をやります


回り込みの指定も<head>内に

float」という命令を使って回り込ませます


headerはそのまま上に置いとけばいいので

headerは何もしません

回り込ませるのは横並びになってる

leftside、mid、rightsideの3つです


とにかくソースを見てみましょう


ホームページを作る

leftsideの「float:left;」は

leftsideの段落を「左側に回り込ませる」という意味です

midも同じ指定があります

rightsideだけ右側に回り込ませています。


fooderは何も指定しないと勝手に

回り込みの影響を受けて

左側に回り込んだmidの右側

右に回り込んだrightsideの左側

つまりmidとrightsideの間に配置されます

なのでfooderには回り込みを解除する

clear」を指定して上げます

both」とは、右・左両方という意味です

これをブラウザで確認すると


ホームページを作る

という風に、レイアウトの配置ができています


これにmenuという段落を

headerの下に追加したいと思います



ホームページを作る


ソースはこちら


ホームページを作る
これは<head>ないの

<style type="text/css">(以後スタイルシート)



ホームページを作る
こちらは<body>ないの記述


新たに追加されている部分が分かりますか?


というわけで今回はレイアウト通りに

段落の回り込みをやりました

後はこれらのサイズを指定してやれば

予定のレイアウトになるはずです


次回は各段落のサイズ指定をやります