この機能はSafari3からあったのですが4になって上下で見れるようになったようで改良されています。全体に見やすい感じ。
出し方はまずは環境設定で「開発メニュー」を表示にチェック。知りたいページの部分で右クリックすると出てくるメニューの最後「要素の詳細を表示」を選ぶだけです。
画像はソースを見るのに便利な「要素」の部分。ブログのデザインで既成のものをカスタマイズする場合どのタグがどの部分を、反対にこの部分のタグはどれ？みたいな時便利です。
例はこのブログなのですが、左メニューのパートである＜div id=”leftside”＞をクリックするとこんなふうにその部分に色がついて示されます。
CSSも右に表示され選択されている部分のサイズやパディング、マージンも一目瞭然。便利ですよね。
こういう機能ってDreamweaverならもちろんあるんだけどウェブ上で気軽に出来るのがいいです。リソースのほうをみるとリンクされているjavascript、css、あとはページに使われている画像とかのサイズや読み込み時間がわかります。もちろん各パーツの詳細もね。
そのままソースを見てもなかなかわかりにくい近頃のページ構造ですが、これならわかりやすいんじゃないかと思います。
