Top Firefox拡張機能(アドオン) >マウスポイントした箇所のCSSプロパティを簡単に確認できるFirefoxアドオン「CSS Viewer」
2012年05月08日

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

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

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

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

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

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

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

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


02_CSS Viewer Firefox add-ons.JPG


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


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

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


ダウンロード:CSS Viewer(Add-ons for Firefox)


<関連記事>


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

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

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






この記事をはてなブックマークに登録 follow us in feedly このエントリを del.icio.us に登録 この記事をクリップ!Yahoo!ブックマークに登録
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック





×

この広告は180日以上新しい記事の投稿がないブログに表示されております。