top画像（玄関）

divのきり方

HTML最大の難関（だと私は思う）
divのきり方を説明します。

とりあえず最初は上から下まで

まず、pageの設定をします。説明しにくいので図をご覧下さい

この青い線の幅はpageというdivでくくっています。
bodyは、おまじないに記載した<body>です。
divの書き方はこうです。

これでOKです。次にヘッダーの設定です。

ヘッダーをこういう風に並べるためには、マークアップの時点の前に書き順が正しくないといけません。

なぜ左上基準と書いているのに、２の書き方じゃ駄目なのか。
それは、1は仲間同士でまとめられてるけど、２は他人同士でまとめられているからです。

こうくくったら一番分かりやすいと思います。
左上が基準ですが、文字は右から左に流れています。

こういう順番に書いています。

紫で囲っている部分で、ロゴと右のナビをまとめています。
そして、ロゴを左にやらないといけないので<p>に名前をつけています。
そして、<p>や<ul>だとくくれないので（サイト内検索が仲間じゃないので）
<div>でまとめました。
もしこれが、↓の図のようだと、こうなります。

緑の枠（div:headerの中）に収まっていないので

のように<p id="sart">サイト内検索</p>を
<!--/#logoright--> </div>の外に出してあげないといけなくなる。なぜならdivの高さはロゴの高さだから。
別に外に出さなくても出来ることは出来ると思うけどね。