Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

HTMLの入れ子の構造を手っ取り早く理解する

はてなの人力検索にこんなものがあった。

http://q.hatena.ne.jp/1156049717
htmlについて質問です。会社のHP,個人のHPなどのhtmlのソースを見て勉強しています。しかしタグが沢山ありすぎて、どのタグがどのタグと対応するのか非常に見にくいです。タブがどのタブと対になるかわかりやすく表示できるソフトはありますか?Dreamweaver2004,秀丸にそのような機能があれば教えてください。他のフリーのアプリケーションでもそういう事が簡単にできるものがあれば教えてください。できれば使ったことのある人に限ります。

いろんなソフトウェアが回答として書いてあるが、一時期、僕も使用していたFirefox拡張機能がとにかく便利で、これでHTMLの入れ子をかなり理解しやすくなる。


View Source Chart (Firefox Extension)
単純に該当のソースの入れ子状態をボックスの階層構造で表してくれる。


ちなみに、英語の解説はキツイって方には、http://caramel-tea.com/2006/03/fx_webdev1/に簡単な説明が日本語で書いてあるから、併読してもいいかも。といっても、この拡張機能は使ってみたほうがその便利さが分かりやすいようには思う。