Firefoxのアドオン（拡張機能）である「Firebug」。これを使うと、閲覧中のWebサイトの構造を確認したり、Webサイトを見ながらHTMLやCSSに手を加えて表示を変更することができます。（実際にWebサーバ上のHTMLやCSSが変更されてしまうわけではなく、あなたのブラウザでの表示が変更されるだけです。リロードすると元の表示に戻ります。）
Firebug の使い方
Firebug をインストールすると、ブラウザのステータスバーに Firebug のマーク（虫のマーク）が追加されます。
Firebug を利用する際は、そのマークをクリックします。すると、ブラウザの下の方に Firebug のウィンドウが展開されます。
※ブラウザのツールバーにも、Firebug を利用するためのボタンを2種類 追加できます。
虫のマークの「Firebugボタン」は Firebug が別ウィンドウで展開されます。
「メガネのマーク」のボタンは 調査モードになります。
Firebug ウィンドウの左上のほうにある「調査」って所をクリックすると、現在表示されているWebページのHTMLやCSSソースを確認できる「調査モード」になります。
「調査モード」の時、Webページの調べたい場所（文字や画像、要素）にマウスポインタを合わせると、そこに該当する部分のコードがハイライト表示されます。また、その部分のデザインに反映されているCSSも表示されます。
これにより、例えば 「ここの文字は黄色にするつもりのCSSを書いたのに、黒のままだ？」なんて時に、その文字の色を黄色ではなく黒で表示されている原因となっているCSSを確認できます。また、CSS や HTML（javaScriptも）を、編集して擬似的にブラウザで表示・確認する事ができるので、Webページを見ながら、CSSを微調整できます。
ただし、Webサーバ上のCSSやHTMLが書き換えられるわけではないので、実際のCSSにFirebugで試してみた数値・設定を別に作業する必要はあります。
ですが、これって今までの「CSSを書く」→「アップロード」→「ブラウザで確認」→ダメなら「CSSを修正」→「アップロード」→「ブラウザで確認」→ダメならまた「CSS修正」…、なんて作業が、かなり効率的に行えるようになります。
まあ、とにかく一度使ってみてください。（「Firebugの使い方」なんて言っておきながら、たいした解説ができてませんね(;.;)）特に数値や値をキーボードの上下キーで上げたり下げたり、他の値にしたりできるのが、CSSを熟知していない私は大変助かってます。Firebug はホント便利な機能だと思います。
私はフリーのテンプレートを探す時にも Firebug を利用しています。
テンプレートを公開している所では、よく「Live Preview」などが用意されていて、実際にそのテンプレートが使われているデモページをブラウザで確認できます。
テンプレートのデータをダウンロードする前に、この Live Preview を見ながら、Firebug でちょっといじくってみるわけです。FirebugでHTML・CSSの構造を軽く確認、気になる所はカスタマイズしてみる、で、良さそう（カスタマイズしやすそう）ならダウンロードさせてもらうって具合です。
| < 前 | 次 > |
|---|
