デバッグ用CSSをその場で書けるブックマークレットを作ってみた

カテゴリ:Javascript関連 2010年8月17日 23:23

とにかくその場で追加したいんです

最近あまりに忙殺されているえどです。こんにちわ。
いやほんと、平日なにもする時間がありません。なので、手短に書きたいと思いますw

普段制作をしていると、その場でさっと CSS をとりあえず追加してみて、動きがどうなるか見てみたいな、と思うことはありませんか?
それが IE6 ならなおさら。しかも保存した CSS がサーバに反映されるまで多少のタイムラグがあった日には反映されたのを見るまでなにもできません。(もちろん、ローカルのファイルを参照させて開発する、なんてこともできますが、とにかくちょっと今ここで! っていうのってなにげにあるんですよね)

んで、新しい PC になって特にそう思うことがよくあったので、それならいっそ、とブックマークレットを作ってみました。
作りが違うんで、IE 用とそれ以外のブラウザ用で分けてます。

作ってみたブックマークレット

そして下のやつがその作ってみたブックマークレットです。

CSSを手軽に追加するブックマークレット(IE6対応) - jsdo.it - share JavaScript, HTML5 and CSS

使い方

使い方は簡単です。
コーディングをしているときなどに、ちょっとこのスタイルを追加したい、というときに実行します。
すると右上に入力ボックスが出てくるので、あとはそこに普段通りに CSS を書くだけです。
table td {...}みたいに継承関係も含めて記述可能です。もちろん複数のセレクタやプロパティを書いても大丈夫です。

Firebug では、その要素自体にスタイルを追加する、みたいなことはできますが、継承関係を持ったスタイルを追加したり、class 自体にスタイルが割り当てられてない場合に、class そのものにスタイルを追加できない、という物足りなさがありました。

そういう不便さもあったので作ったものです。よかったら使ってみてください。

この記事のカテゴリー一覧を見る⇒Javascript関連

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/182