クリックでCSSのクラス名と構造を表示する「SelectorGadget」
CSSはよくも悪くも柔軟で、構造的に管理するのが難しい。デザインが乱れた時に、よくよく確認してみると別な場所で定義されているクラスやID、またはタグ名に対する直接指定のプロパティが影響していたということはよくある。
ブックマークレット形式という珍しいオープンソース・ソフトウェア
そのようなデザイン上の問題を素早く解決してくれる手助けをしてくれるのがSelectorGadgetだ。
今回紹介するオープンソース・ソフトウェアはSelectorGadget、ブックマークレット型のCSS構造解析ツールだ。
SelectorGadgetはオープンソース・ソフトウェアではあるが、ブックマークレットをコピーするだけでも利用を開始することができる。任意のページでブックマークレットを実行するとSelectorGadgetがローディングされる。
HTMLの構造が手軽に分かる
それが終わったらCSS設定を知りたい箇所をクリックすれば良い。フローティングウィンドウ上にクラス名が表示される。さらに同じ設定で影響を受けるエレメントについてもハイライト表示される。
デザイン修正の他にも、HTMLスクレイピングの基礎にしたり、Seleniumを使ったテストの開発にも利用できる。見た目だけでは分からない、内部的な設定を掘り出してくれる便利なツールだ。
**Introducing SelectorGadget: point and click CSS selectors
**
http://www.selectorgadget.com/
iterationlabs’s selectorgadget at master - GitHub