Firefox拡張機能”Web Developer”

Firefoxの拡張機能に、Web Developerというのがあります。
この拡張機能、とても便利で重宝しているのですが、最もよく使う機能は「CSSの編集」です。
サイドバーに現在開いているページのCSSが表示され、リアルタイムで編集出来ます。CSSを手打ちで入力しなければいけないので、「CSSが全く解らない!」という方には不向きかもしれません。
僕の「CSSの編集」の主な使い方は二つ。
まず一つ目は自分のサイトを開いて、CSSを手打ちで編集していき、レイアウトが出来たらそのコードをそのままコピー。そしてDreamweaverなどのソフトを開き、コピーしたCSSをそのままペーストしてサーバにアップロードします。本来Dreamweaverで直接編集すればいいのですが、プレビュー画面があまり当てにならないということと、実際のブラウザで確認する作業も含めて作業出来るので非常に効率よく作業出来ます。またFirefoxはWeb標準に準拠したブラウザでもありますので、確実です。
もう一つは、人が作ったサイトのCSSを参考にする際に使っています。
巧みなCSSテクニックを使ったサイトを参考にする際、「ここをこうすればどうなるの?」という疑問が生じます。そんな時にWeb Developerの「CSSの編集」を使います。¥r¥nリアルタイムでレイアウトが変わっていくので、勝手にCSSを編集してテクニックを盗むことが可能です。¥r¥n¥r¥nまた、このWeb Developerという拡張機能には、ブロック要素を枠で囲んで表示する機能や、ボックスのサイズを表示する機能もついていますので、サイトの構造を知るのにとても便利です。
トラックバックURL
http://snjweb.com/happy/web/firefox-web-developer.html/trackback

