Web制作で大活躍! FirefoxのHTML・CSS・JavaScriptのチェック機能活用術

Web制作をしている方ならば、ページの表示の崩れが出た際にはソースを調べるかと思います。しかし、HTMLやCSSの作成に慣れてくると、ソースコードを調べるよりももっと効率の良い方法はないのかと考えますよね。

ここで、Firefoxの便利なアドオン「Firebug」を使ってみましょう。

HTMLやCSSの基本的な知識がある方ならば、Firebugを使うことで効率的にデバッグを行うことが出来ます。

Firebugを使ってみる

c1

Firebugのアドオンをインストールすると、ツールバーに虫のアイコンが表示されます。名前にbugとついているだけありますね。

c2

調べたいページで先程の虫のアイコンをクリックすると、Firebugの画面が表示されます。下部に現れたパネルがHTMLやCSSのソースになります。

c3

ツールバーの、虫アイコンの一つ右にあるアイコンを選択すると、調べたい要素をHTMLのどこに表されているのかを簡単に表示することが出来ます。

青い枠線で囲まれた部分が、そのままHTMLのソースコードに反応していますので、確認したいところでクリックするとFirebugのHTMLの表示画面には該当するタグが選択されます。CSSの表示画面にはそのタグにかかっているCSSを確認することが出来ます。

c4 のコピー

CSSには、記述されたファイル名と何行目に記述されているかが表示されるので、上から探さなくとも修正箇所をすぐに確認することが出来ます。

c6

そしてFirebugの最大の利点が、変更したい場所を選択するとそのまま画面に変更した内容が表示されるということです。例えば上の画像のように、下部に表示されている値をそのまま変更すれば、表示されている画像の大きさを変更することができます。

といっても、ここで変更してもそのままWebページに反映されるわけではありません。あくまでも一時的に表示を書き換えているだけですので再読み込みをすると元通りになります。

しかし、この機能を使うことで、幅が広すぎたり狭すぎたりとレイアウトに問題がある箇所の値を書き換えて、レイアウトが崩れない数値を実際に見ながら探すことが出来ます。

まとめ

実際にページの編集をするのは、Firebugでは出来ませんが簡単に確認をするのに大変便利なツールです。

簡単にチェックできるFirebugを是非使ってみてください。


購読

平日・毎朝更新中