Google Chromeで要素を検証

Google Chromeを試してみた。ブラウザとしての一通りの機能のほかWeb開発に便利な「要素を検証」がうれしかった(画面を右クリック)。WordPressを使い始めてから、デフォルトのテンプレートをいじって自分用テンプレをつくっているんだけど、人が作ったものなので最初にブロック要素の構造を解き明かすのが大変。自分が書いたCSSでもボックスのマージンやボーダー、パディングを細かく指定していると「あれ、なんだか思ったとおりの寸法にならないぞ」などと言うことが結構ある。そんなときGoogle ChromeでMetoricsをみればボックスごとの寸法をグラフィカルに表示してくれてとても把握しやすい。

#page

#sidebar

#content

上の3つはGoogle ChromeのMetoricsで表示したこのサイトのボックスモデル、親ボックス#page(width:760px)の中に子ボックス#content,#sidebarが2カラムでデザインされている。右の#sidebarはpadding-left:545px, padding-right:25px, width:190pxなのでボックスの総ワイドが545+25+190=760pxで#pageの中に納まっているねと確認できる。<br />
自分だけだと思うけどこの辺の親ボックスに対する位置関係や総ワイド関係が一番苦手、これがボックスの絵で表現されているだけでずいぶんの楽になるよ。当然旧IEなんて知ったこっちゃ無いがな。