Webデザイナーの方で、今表示されているページのスタイルシート設定を確認したいと思ったことはないでしょうか。DevToolsなりを使って確認できますが、スタイルシートごとに分かれていたりしてちょっと分かりづらいです。 実際にどのスタイル設定が適用されているか確認したい、そんな目的にぴったりなのがCSSViewerです。

CSSViewerの使い方

CSSViewerはChrome ウェブストアで公開されています。インストールするとアイコンが追加されますので、任意のWebページで実行します。

実行例。こんな感じのフローティングが表示されます。

フォントやテキスト、色、ボックスなどの情報が確認できます。

マウスを移動すれば、調査する要素も変わります。

さらに要素の情報を出力する機能があります。気になる要素を右クリックすると、CSSViewer consoleというメニューがあります。ここから出力したい設定を選択します。

このように設定がコンソールに出力されます。

CSSViewerを使えばデザインの確認が容易になります。さらにそれをコンソールに出力することでJavaScriptから操作する際の参考にもなるでしょう。デザイン、開発の両面で役立ちそうです。

CSSViewerはGoogle Chrome用のオープンソース・ソフトウェア(GPL)です。

CSSViewer - Chrome ウェブストア miled/cssviewer