CSSの制作・検証に役立つChromeの機能拡張のまとめ
Post on:2011年6月16日
CSSの制作時や検証時に役立つGoogle Chromeの機能拡張を紹介します。
いくつか機能がかぶっているので、お好みのものをご利用ください。
![Chromeのキャプチャ](/wp-content/uploads-2011/2011061603-01.png)
code cola
マウスカーソルを重ねた要素のスタイルを表示し、リアルタイムに値を変更することができます。
![Chromeのキャプチャ](/wp-content/uploads-2011/2011061603-02.png)
CSSViewer
マウスカーソルを重ねた要素にCSSで何を指定しているかが分かります。
[ad#ad-2]
![Chromeのキャプチャ](/wp-content/uploads-2011/2011061603-03.png)
Live CSS Editor
テキストボックスが表示され、そこにCSSを書くことでリアルタイムに反映されます。
![Chromeのキャプチャ](/wp-content/uploads-2011/2011061603-04.png)
CSS Tester
上記「Live CSS Editor」と同じで、書いたCSSがリアルタイムに反映されます。こちらはシンタックスハイライトに対応しています。
[ad#ad-2]
![Chromeのキャプチャ](/wp-content/uploads-2011/2011061603-05.png)
CSS Reloader
ページをリロードせずに、CSSのみリロードします。
![Chromeのキャプチャ](/wp-content/uploads-2011/2011061603-06.png)
Stylebot
ページ内の指定した要素のスタイルシートをリアルタイムに変更します。
![Chromeのキャプチャ](/wp-content/uploads-2011/2011061603-07.png)
MeasureIt!
CSSに直接関係ありませんが、要素のサイズを測る定規です。
![Chromeのキャプチャ](/wp-content/uploads-2011/2011061603-09.png)
Eye Dropper
カラーピッカー。吸い取ったカラーの履歴も保存します。
![Chromeのキャプチャ](/wp-content/uploads-2011/2011061603-10.png)
Pendule
CSSの無効化(インラインのみなども可)、CSSの表示(整形対応)、CSSのチェックをはじめ、他にもHTML、JavaScript関係も充実したウェブ開発総合ツール。
sponsors