CSSViewer – 任意のWebサイトで要素のスタイル設定を確認
Webデザイナーの方で、今表示されているページのスタイルシート設定を確認したいと思ったことはないでしょうか。DevToolsなりを使って確認できますが、スタイルシートごとに分かれていたりしてちょっと分かりづらいです。 実際にどのスタイル設定が適用されているか確認したい、そんな目的にぴったりなのがCSSViewerです。
CSSViewerの使い方
CSSViewerはChrome ウェブストアで公開されています。インストールするとアイコンが追加されますので、任意のWebページで実行します。
フォントやテキスト、色、ボックスなどの情報が確認できます。
さらに要素の情報を出力する機能があります。気になる要素を右クリックすると、CSSViewer consoleというメニューがあります。ここから出力したい設定を選択します。
CSSViewerを使えばデザインの確認が容易になります。さらにそれをコンソールに出力することでJavaScriptから操作する際の参考にもなるでしょう。デザイン、開発の両面で役立ちそうです。
CSSViewerはGoogle Chrome用のオープンソース・ソフトウェア（GPL）です。