【A List Apart】デザインの綺麗なサイトや、変わったレイアウトのサイトを見かけると、自分もサイト持ちだけに「どうやって実現してるんだろう？」と気になるわけだ。

むろんソースを読めば済む話で、実際この日記のデザインを組むにあたっては方々のソースを参考にさせてもらった。しかしCSSを駆使したサイトだと、どの部分がどのclassやidの影響を受けているのか、あちこち読み比べるうちに頭がぐるぐるしてくる。下手すりゃ自分のサイトを弄る時だって（いまだにソースはテキストエディタで手書きだ）、どこを書き直せばいいのか混乱しがちだ。

そういう人間のために、ものすごく便利なFirefoxの機能拡張がある。

• Chris Pederick's Web Developer's Toolbar

これをインストールすると、ユーザースタイルシート機能を使って、閲覧中のWebページの構造を解析したり、CSSの文法チェックをしたりできる。たとえばOutline > Outline Block Level Elementsを選ぶと、ブロックレベル要素がどういう構造になっているか色分けした枠できれいに表示してくれる（→スクリーンショット）。さらにInformation > Display ID & Class Detailsを選ぶと、それぞれの要素の見栄えがどのIDやClassで指定されているか逐一ラベルをつけてくれるというサービスっぷりだ。

しかもフリーウェアである。こういう機能は高価なDreamweaverでも買わないと使えないものだと思いこんでいたから感動的だ。

ちなみに件のツールバーを使ってこの日記のタグ構造を表示させると相当ごちゃごちゃしてるのがわかる。Movable Typeのバージョンアップも成功したことなので、そろそろ改装しよう。

 

[memo]Web Developer 日本語版

以前、教授のブログで紹介されていた、FirefoxでWebページの構造を表示させる機能拡張。鮎方さん（id:Ayukata:20050312#p3）が取り上げて... 続き... - Trackback from Roamning Sheep 〜安全編〜 march 12, 2005 08:28 pm