ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSSはよくも悪くも柔軟で、構造的に管理するのが難しい。デザインが乱れた時に、よくよく確認してみると別な場所で定義されているクラスやID、またはタグ名に対する直接指定のプロパティが影響していたということはよくある。


ピクチャ 61.png

ブックマークレット形式という珍しいオープンソース・ソフトウェア

 

そのようなデザイン上の問題を素早く解決してくれる手助けをしてくれるのがSelectorGadgetだ。

今回紹介するオープンソース・ソフトウェアはSelectorGadget、ブックマークレット型のCSS構造解析ツールだ。

SelectorGadgetはオープンソース・ソフトウェアではあるが、ブックマークレットをコピーするだけでも利用を開始することができる。任意のページでブックマークレットを実行するとSelectorGadgetがローディングされる。


ピクチャ 62.png

HTMLの構造が手軽に分かる

 

それが終わったらCSS設定を知りたい箇所をクリックすれば良い。フローティングウィンドウ上にクラス名が表示される。さらに同じ設定で影響を受けるエレメントについてもハイライト表示される。

デザイン修正の他にも、HTMLスクレイピングの基礎にしたり、Seleniumを使ったテストの開発にも利用できる。見た目だけでは分からない、内部的な設定を掘り出してくれる便利なツールだ。

 

Introducing SelectorGadget: point and click CSS selectors

 http://www.selectorgadget.com/

iterationlabs's selectorgadget at master - GitHub

 http://github.com/iterationlabs/selectorgadget/tree/master

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2