Windowsパソコンの主なブラウザとしては、Internet Explorer・FireFox・Chrome・Safariなどがありますが、この中で最もWebデザイナーに愛されているブラウザがFireFoxです。ここでは、このFireFoxの非常に有名なアドオンである、FireBugをご紹介します。
https://addons.mozilla.org/ja/firefox/addon/firebug/
HTML+CSSのコーディングを行う際、DreamweaverではデザインビューでCSSのコードミスを発見できますが、それよりももっと便利なのがFireBugです。FireBugでは、HTML+CSSに限らず、PHPで書いた動的ページのコードの間違いも発見することができます。
では実際に、FireBugの使い方を見ていきましょう。FireBugがインストールされたFireFoxには、下の写真の右上の部分のような虫のアイコンが表示されますので、検証したいページを表示した状態でこれをクリックします。すると、画面の下の方にFireBugのウインドウが開きます。
ここで、FireBugのウインドウ左上の長方形に矢印が乗っているようなアイコンをクリックし、ブラウザ内の調べたい要素をクリックします。ここでは、ページ本文の<p>当ホームページは・・・構えてみませんか？</p>の部分を調べてみます。
写真からは読み取りづらいですが、左下のウインドウ内の<p>～</p>タグが選択されています。また、右下のウインドウでは、この<p>～</p>タグに適用されているCSSプロパティの一覧が表示されます。では、そのCSSプロパティを確認してみましょう。
ここで、common.cssの99行目で、#left_content pというセレクタにpaddingのプロパティが設定されていることが分かります。次の行の#content pは、後から上書きされて無効になっています。ページ本文のpaddingを変更したい場合には、common.cssの99行目を見ればいいということになります。
FireBugでは、特定のプロパティを一時的に無効化して表示を確認することもできます。
無効化したいプロパティの上でクリックすると、上の写真のように通行止めマークが表示され、それと同時にブラウザに表示されているコンテンツから、このプロパティが外れた状態で表示されるようになります。
以上が、FireBugの基本的な使い方です。自分が書いたCSSのどこが間違っているのか分からない時には非常に助けになりますので、ぜひ有効に活用しましょう。
FireBugには、日本語化されておらず簡易版ではありますが、Chrome版もあります。Chromeをメインブラウザとして開発する場合にはこちらを利用する方法もあります。
https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench