ITエンジニア/デザイナ向けにオープンソースを毎日紹介

DomTreeはWebサイトのDOM構造をツリー化してくれるビジュアル化ソフトウェアです。

奇麗なHTMLはソースを見てもやはり奇麗に記述されているものです。さらにDOMの構成において奇麗にできているかどうか可視化してくれるソフトウェアがDomTreeです。


Googleです。73エレメントで作られています。


MOONGIFT。294とのことです。すごく…密です。


Yahoo! Japan。CenterやTableタグを使っているあたりはやはりサポートするブラウザの多様性ゆえでしょう。


楽天。すごい数です。なんと957。


2003年当時のMOONGIFT。51だそうです。


2008年当時のデザインでは600近い数になっていました。


拡大表示もできます。

必ずしも奇麗なDOMツリーになっていることが奇麗なデザインにつながる訳ではないと思いますが、空タグや無理矢理ハックしてデザインを整えたりしているとツリー上も無理が生じている可能性があります。自分のサイトを見てみると面白いかも知れません。

DomTreeはnode.js/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。


MOONGIFTはこう見る

プログラミングにおいてエレガントなコードはバグも少なく、見通しもよく、誰でもすぐに理解できるものになっていることが多いです。逆にトリッキーなものやスパゲティーなコードはバグが混入しやすく、間違った使い方をして余計な不具合につながったりします。

デザインにおいてもそれは変わらないでしょう。美しいデザインとはやはりソースを見ても奇麗であるべきです。そのためには余計なハックはなく、Web標準に則り、適切なインデントとコメントが入っているものではないでしょうか。

domtree.breckyunits.com/?v=2

breck7/domtree · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2