Google

2010年10月7日木曜日

divタグの段々畑

突然、とあるページのdiv入れ子がおかしいという報告を受ける。
指示を出して修正してもらったのだけど、階層構造が変らしく、全然直らない。
じゃあ入れ子をチェックしてくれ、とお願いするが、多すぎてダメだとの事。

仕方ないので自分で全てチェックをする事に。
ググってみたところ、Divの入れ子をちゃんとチェックするツールは見当たらない。
入れ子の正解なんて人間でしか解らないだろうから仕方ないんだけど。
そんでもやらなきゃなんで、自分なりの判断方法で修正を開始。

今回やったのは以下の手法。

1. 秀丸を使う
2. とにかく小さいところから見ていく
3. 階層構造のインデントを綺麗にする
4. divの終わりにはクラスorID名をきちんと書く


秀丸の選択は単に以下の理由。

・検索のハイライトができる
・まとまった行を畳める
・全文検索ができる

これらができればどのエディタでもおkなので、とりあえず秀丸。
行を畳むっていうのは具体的にこういう感じ。

もとはこうだとする
37行~42行までを、こう選択して、、、
行表示の左にあるハイフンを押せば畳めてすっきり
小さいdivの部分はほぼ確定するので、これを繰り返して入れ子の矛盾を出していく。
秀丸の全文検索でも<DIVと</DIVを検索し、数が合うかどうかのチェックも同時進行。
階層のインデントも、視覚的な矛盾を発見するのに結構大事だったりする。

なんかとっても原始的な事をやっている気もするが、これで一応解決。
今回は多いとは言え、そこそこの行数だったのが幸いだった。

0 件のコメント:

コメントを投稿