Webサイト制作時はFirefoxを利用することが多いですが、ブラウザの機能に制作時にとても役立つ「開発者ツール」というものが用意されています。ちなみに私が制作時によく使っているのがFirebugというアドオンです。
FirebugはFirefoxユーザや開発者には有名なアドオンです。多機能で優秀なツールですが私はまだ一部しか使いこなせていません。その一部をご紹介するだけでも、非常に便利なツールであるとご理解いただけると思います。
まずFirebugの機能の1つとして、現在閲覧中のサイトのHTMLやCSSを確認することができます。これだけであればごく一般的な機能ですが、各要素に対してどれだけのスタイルが指定されているのかをピンポイントでチェックできる機能が備わっています。
例えば作成中のページレイアウトが崩れている時、何が原因でレイアウトが崩れたのか、崩れている要素に対してどんなスタイルが指定されているのかを要素ごとに細かく確認できます。これが出来ることで制作者が想定していなかったスタイル指定が影響していることを発見できたり、HTMLの記述ミスを発見したりしやすくなるのです。
便利なのはオンライン上で一時的にHTML/CSSを編集できることです。HTMLだけではなくCSSも編集することができるので、「こうすると解決できるかもしれない」と思ったことを、今あるHTML/CSSファイルを編集することなく、その場で試してみることができます。
あくまでも一時的にブラウザ上で編集しているだけなので、ページを再読み込みすると試しに編集した内容は消えてしまいます。解決方法が見出せたら、手元のファイルを修正してアップして下さい。
その他、画像が表示されていない場合やjavascript実行時にエラーが発生した時などにエラーコンソールというメニューからそれらを確認することもできます。詳しい使い方は下記のURLなどを参考にしてください。
Firebugの基本的な使い方について
このような開発者ツールはGoogle Chromeにもあらかじめ備わっており、こちらの場合は新たにアドオンなどをインストールする必要はありません。
ブラウザ内で右クリック→「要素を検証」で表示させることができます。
Firebugをはじめとする開発者ツールは、非常に有用な様々な機能を備えています。全てを使いこなせなくても制作には十二分に役立てられますので、まずはいずれかを導入するところからはじめてみて下さい。
