CSSを扱うのに便利なChromeのエクステンション

本日は少々手を抜きまして、ふらふらとネットをさまよっていて拾ったChromeエクステンションをご紹介してノルマというお茶を濁すことにします。

Stylebot

HTMLやCSSの変更をリアルタイムに試せるツールとしてはfirebugが有名で、chromeにもそのエクステンションはあるものの若干使いづらいです。bookmarklet版もあってそちらは多少使いやすいかもですが・・・いずれにしろなんだか重いような。で、結局FF立ち上げてFirebugを使ってしまうんですよね。

で、ちょっと一箇所変えるとこ試したいとかならchrome上でこういうツールでさくさくっと対応できればらくちんです。この手のエクステンションをいくつか試してみたんですが、これが一番軽くて動作が正確な気がしました。入力した各項目はCSSにしてクリップボードにコピーできるのでそのまま使えます。残念なのは、現状がどうなっているのかってのがわからないこと。そこで、現状を見るためには別のエクステンションを入れればいいのではないかと。それが次に紹介するCSSViewrです。

CSSViewer

こちらは、オンにしてあとはマウスオーバーするだけでその箇所のCSSがフロートしたボックスに表示されます。見るだけならすごく手軽。便利です。

Eye Dropper

カラーピッカーです。サイトからスポイトで色を拾う機能と、そのヒストリ保存。そして、パレットから色を選択することもできます。色を感覚的に16進にするのは意外に難しいので、重宝しています。

MeasureIt!

ウインドウ内の任意の箇所のピクセル数を測れる機能です。FFでもあったものなのでご存知の方多いかと思います。実は以前もこのブログで紹介したことがあったのですが、Chrome版は結構動作が不安定で、いっとき使っていませんでした。今回使ってみたら普通に使えるようになってたので復活です。

ツイートカウンター for Twitter

あと最後に、CSSほっとんど関係ないですが、そのサイトに関してつぶやかれてる数を引っ張ってくるエクステンション。アドレスバーの端っこに数字がでます。そこをクリックするとそのつぶやきを引っ張ってきます。意外に楽しいです。

そんな感じで、相変わらずChromeさまさまです。

で、このエントリは手抜きですが、金曜の夜に一人で事務所にいてモチベーションなんて上がるかっていう話ですよ。みんな楽しく過ごせばいいよ。ああ、いいさ。

では皆様よい週末を。