CSSの制作・検証に役立つChromeの機能拡張のまとめ

CSSの制作時や検証時に役立つGoogle Chromeの機能拡張を紹介します。
いくつか機能がかぶっているので、お好みのものをご利用ください。

Chromeのキャプチャ

code cola
マウスカーソルを重ねた要素のスタイルを表示し、リアルタイムに値を変更することができます。

Chromeのキャプチャ

CSSViewer
マウスカーソルを重ねた要素にCSSで何を指定しているかが分かります。

Chromeのキャプチャ

Live CSS Editor
テキストボックスが表示され、そこにCSSを書くことでリアルタイムに反映されます。

Chromeのキャプチャ

CSS Tester
上記「Live CSS Editor」と同じで、書いたCSSがリアルタイムに反映されます。こちらはシンタックスハイライトに対応しています。

Chromeのキャプチャ

CSS Reloader
ページをリロードせずに、CSSのみリロードします。

Chromeのキャプチャ

Stylebot
ページ内の指定した要素のスタイルシートをリアルタイムに変更します。

Chromeのキャプチャ

MeasureIt!
CSSに直接関係ありませんが、要素のサイズを測る定規です。

Chromeのキャプチャ

Eye Dropper
カラーピッカー。吸い取ったカラーの履歴も保存します。

Chromeのキャプチャ

Pendule
CSSの無効化(インラインのみなども可)、CSSの表示(整形対応)、CSSのチェックをはじめ、他にもHTML、JavaScript関係も充実したウェブ開発総合ツール。

top of page

©2017 coliss