Web開発者に便利。WebサイトのCSSプロパティが簡単に分かる「CSSViewer」

2008/12/27

デザインが苦手な人にとって（筆者をはじめ）、CSSによるデザインに問題がある際に何が問題なのかを把握するのがまず難関だ。別な場所で設定した内容が関連している場合もあるだろうし、IDで指定しているのか、はたまたClassで複数指定している場合もあったりするとさらにややこしい。 0

CSSで困った時に役立つFirefoxアドオン 0

そこで、現在表示されている内容がCSSではどのような設定になっているのか、それを理解する所からはじめよう。使うのはCSSViewerだ。 0

今回紹介するフリーウェアはCSSViewer、CSSプロパティの一覧を作成するFirefoxアドオンだ。

CSSViewerをインストールするとツールメニューにCSSViewerという項目が追加される。これを選択するとマウスが乗っている項目のCSS設定値がフローティングウィンドウ上に表示される。 0

指定した場所に赤い点線が引かれる 0

項目はフォントやテキスト、色や背景、ボックス、ポジションに関する四項目に分かれて表示される。同じような内容はFirebugでも取得できるがCSSViewerのが分かりやすい並びになっている。 0

ただし、IDやClassが指定されている場所はうまくとれるがタグで直接指定されている場合は表示されないようだ（inputやaなどなど）。また、フローティングウィンドウ内の値がコピーできないのが若干残念ではある。 0

とは言え開発に役立つ情報であることは間違いない。デザインが苦手な方、または逆に得意な方にとっても役立つソフトウェアだろう。 0

MOONGIFTの関連記事