2006.12.01

<div></div>の迷路にはまらないためには

ページの構造が複雑になればなるほど<div></div>が何重にも重なり、ひとたびレイアウトが崩れた際にはソースチェクも大変になりますね。</div>が足りない、または多い事がレイアウトが崩れる多くの原因です。

まず一番のお勧めは「Dreamweaver」で開いて見る事です。
たとえ自分のブラウザで問題無く見えていても「Dreamweaver」で開くと崩れている事があります。それは自分のブラウザでたまたま見えていただけで、違う条件が入れば新たな問題が出てきます。

「Dreamweaver」で開いて、小さなブロック(<div></div>)から順番に選択して消していきます。テキストエディタで手作業で消してもかまいません。こうしてソースをどんどんシンプルにしていけば足りない、または多い</div>が必ず見つかります。

ソースを新たに書く時は、まずページの大きな構成から作り始めます。
<div id="container"></div>

以下のように大きなかたまりを足していきます。
<div id="container">
  <div id="pagebody"></div>
</div>

「Dreamweaver」が開始タグの次に必要な終了タグを自動的に書いてくれます。
逆に言えば自分の書こうとした終了タグと違うものが出ればそれは間違っている事になります。

常にページの構成を意識してシンプルなソースを書く事を心掛けていれば<div></div>の迷路も怖くありません。

---投稿者一言コメント----------

手描き風な絵をタブレットを使って描いています。しかしやっぱり手の感触が全く別物です。麻キャンにパレットナイフを押し付けた時の弾力が懐かしいです。

photo
hashimoto