CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』

SPONSORED LINK

Pocket

かなりマニアックではあるが、その筋の人にはすっごく便利なのでは。

SelectorGadgetではCSSのセレクタを書くためのブックマークレットを配布している。CSSのセレクタは慣れるまで書くのが大変である。

しかしこれを使えば「タイトルだけを指定するCSSセレクタ」「このテーブルのこの列だけを指定するセレクタ」なんてのをインタラクティブに指定しながら確認していくことができる。

使い方は簡単で、まずはブックマークを好きなページで起動する。すると右下にセレクタ表示用のボックスが現れる。

次にセレクタに含めたいDOMをクリックする。するとそこが緑になり、さらにそのセレクタにマッチするDOMが黄色で表示される。その中で排除したいものがあれば再度クリックすれば赤くなる。

こうやってDOMをクリックしながら作業をしていくとリアルタイムに右下に現在マッチしている要素に関するセレクタが表示される、という仕組みだ。もちろんボックスに直接セレクタを書いてどこがマッチするのかを確認する、という使い方もできる。

このブックマークレットを使って「どういう書き方をすればどこがマッチするのか」を確認するだけでも勉強になるだろう。jQueryなんかを使っている人には特におすすめである。

SelectorGadget

http://www.selectorgadget.com/

CSSのセレクタをインタラクティブに設定・確認可能なブックマークレット。

管理人の独り言 『徹夜・・・』

あれれ、すごい勢いで徹夜しちゃったよ・・・今日が正念場。明日までになんとかしないと・・・。

今日の運動記録

あとでやる。

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. February 28th, 2009
    Trackback from : With Baby Life