マウスポイントした箇所のCSSプロパティを簡単に確認できるFirefoxアドオン「CSS Viewer」

Firefoxアドオンの中には、ウェブページのスタイルシートを参照したり編集したりすることができるものがいくつかあります。

こうしたツールを使えば、本格的なローカルツールなどを使わなくてもCSSの確認などができることから、開発者やサイト管理者の中にはインストールされている方も多いと思います。

このようなツールは非常に有用なものですが、ユーザーによってはとりあえず使っているフォントやサイズなどが確認できればいいという方もいらっしゃるでしょう。

今回は、そんなライトユーザーに便利なCSSチェックアドオン「CSS Viewer」というものをご紹介したいと思います。

「CSS Viewer」は、ページ全体、またはマウスオーバーした箇所のCSSプロパティをポップアップ表示し、その内容を確認することができるというものです。

アドオンをインストール後、ツールメニューの[CSS Viewer]、またはツールバーに設置できる専用のボタン　　をクリックすることでツールが起動するようになっています。

ツールはマウスと連動して移動するようになっており、CSSをチェックしたい箇所にマウスオーバーすることで、その部位のスタイルシートプロパティを確認することができるようになっています。





*該当する要素は赤い破線で囲まれます。
*ツールメニュー、またはツールバーボタンを再度クリックすればツールがOFFになります。


ポップアップ内にはフォント＆テキスト、カラー＆背景、BOXなどの情報が表示されるようになっており、とりあえず内容を確認するという程度なら必要十分なレベルであると言えます。

このように、非常にシンプルなツールではありますが、気になるページのスタイル情報を手早く知りたいという方は、使ってみてはいかがでしょうか。


ダウンロード：CSS Viewer（Add-ons for Firefox）


＜関連記事＞


■スタイルシート（CSS）を含んだ完全なページ保存ができるFirefoxアドオン「Save Complete」

■閲覧しているページのCSSをリアルタイムに編集して状態を維持できるGoogle Chromeエクステンション「Stylebot」

■サイトをプレビューしながらサイドバーでスタイルシートを編集できる「EditCSS」