読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

Web制作に役立つ拡張機能

web標準

以前から、Web Developer Toolbarはよく利用していたのだが、覚え書き@kazuhi.to: Re: 第7回 ページ構造を確認する方法のところで、面白いFirefox拡張機能を発見してしまった。


それが、X-RayProfessor X


使い方は、覚え書き@kazuhi.toさんのところを読んでもらえれば分かるのだけど、まずWDTで「CSS」→「CSSを無効にする」→「すべてのCSS」を選択して、そのサイトのCSSを全て無効にしてしまう。その上で、「ツール」に「X-Ray」、もしくは「Professor X」を選択すると、CSSを切ったHTMLのみのサイトに、divやh1などの要素がズラッと並ぶ。これで、HTMLの構造を一気に理解することができる。いやー、便利。


WDTでもCSSを切ったりするのは便利なのだけど、いかんせんXHTMLCSSがどういうふうに絡んでいるのかが分かりにくかった。(「CSSを編集する」でborderを指定してみたり、該当のCSSを消してみたり)ただ、この拡張機能なら、XHTMLCSSの構造への理解がかなり早まるんじゃないだろうか。