- 2009-02-27 (Fri) 10:00
- その他
かなりマニアックではあるが、その筋の人にはすっごく便利なのでは。
SelectorGadgetではCSSのセレクタを書くためのブックマークレットを配布している。CSSのセレクタは慣れるまで書くのが大変である。
しかしこれを使えば「タイトルだけを指定するCSSセレクタ」「このテーブルのこの列だけを指定するセレクタ」なんてのをインタラクティブに指定しながら確認していくことができる。
使い方は簡単で、まずはブックマークを好きなページで起動する。すると右下にセレクタ表示用のボックスが現れる。
次にセレクタに含めたいDOMをクリックする。するとそこが緑になり、さらにそのセレクタにマッチするDOMが黄色で表示される。その中で排除したいものがあれば再度クリックすれば赤くなる。
こうやってDOMをクリックしながら作業をしていくとリアルタイムに右下に現在マッチしている要素に関するセレクタが表示される、という仕組みだ。もちろんボックスに直接セレクタを書いてどこがマッチするのかを確認する、という使い方もできる。
このブックマークレットを使って「どういう書き方をすればどこがマッチするのか」を確認するだけでも勉強になるだろう。jQueryなんかを使っている人には特におすすめである。
管理人の独り言 『徹夜・・・』
あれれ、すごい勢いで徹夜しちゃったよ・・・今日が正念場。明日までになんとかしないと・・・。
今日の運動記録
あとでやる。
Comments:0
Trackbacks:1
- Trackback URL for this entry
- http://www.100shiki.com/archives/2009/02/selectorgadget.html/trackback
- Listed below are links to weblogs that reference
- CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 from 100SHIKI ～ 世界のアイデアを日替わりで
- trackback from With Baby Life 09-02-28 (Sat) 1:13
-
CSSセレクタの確認 – Selector Gadget
http://www.selectorgadget.com/ これ便利だー。 ブックマークに入れて、調べたいページを表示したところで、Selector Gadgetを起動。 で、調べたいところにマウスをのっければ、CSSセレクタが表示…
