意外と知られていない機能が多い！？Firebugの使い方

2010/06/24

カテゴリ：: CSS

タグ：: Firefox; Firebug; HTML; CSS

Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。

Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。

もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！

Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。

HTML&CSSの確認

コーダーが基本的に一番使っていると思われる機能です。表示されているページのHTMLとCSSを表示しています。HTMLの表示は、JavaScriptによる変化も表示してくれますし、属性値やテキストもその場で編集してみることもできます。

THE HAM MEDIAでFirebugを使用した表示

見たい要素を表示部分から指定することも可能です。

「ページ内の調べたい要素をクリックしてください」

「ページ内の調べたい要素をクリックしてください」から要素を選択することができます。選択した要素はHTMLだけでなく、Firebugの右側にはその要素に適用されているCSSが表示されています。

選択中要素のCSS

スタイルの一番上に表示されているセレクタが最も(適用される)力が強く、下に行くと、親セレクタなどから継承されてきているCSSが順に表示されます。上書きされたプロパティ（より強いセレクタで指定が入っているプロパティ）は横線が入っていて、適用されていないのが視覚的にわかります。

セレクタの右側には、そのCSSが書かれているファイル名と、何行目に書かれているかが青文字で表示されています。ちなみにそのファイル名と行番部分はリンクになっていて、クリックするとFirebugのCSSタブに自動で移り、該当ファイルと該当行が選択されて表示されます。

スタイルの累計表示

通常だとスタイルで表示されているCSSは、セレクタごとの適用されているCSSになっているのですが、スタイルタブの右にある累計タブでみると、最終的にどの値で表示されているのかの「スタイルの累計値」を一目で確認できます。

このタブは地味に便利で、継承された値の計算結果後の値もそこで一発で確認できます。例えば値が％（パーセント）やemで指定されたフォントサイズなど、継承が行われたあとの最終的な値が、px単位で確認することができます。値がどのようになったのか分かりにくくなっているような場合でも、この累計タブでみると、すぐにわかるようになっています。

累計タブにて表示

勉強会の時、この累計タブを知らなかった人がなんと９割もいました。いろいろ聞いてみたところ、主に使っているのはHTMLとスタイルタブだけくらいとのこと。

個人的にはこの累計タブの利用、おすすめです。

スタイル（CSS）の適用・未適用

HTMLのスタイルタブでは、適用しているプロパティそれぞれに対して、適用・未適用の変更がすぐにできます。

何も追加・削除していない状態

例えば上の画像の状態になっているプロパティのうち、floatの適用を外してみます。

floatの適用を外した状態

すると、表示しているサイトで、リアルタイムに表示がかわります。上の画像の例で言うと、floatのスタイルが外れた状態になります。

今度はfont-weightを外してみましょう。

表示されているフォントの太さがすぐに変化します。

値の変更

適用されているプロパティの値も変更することが可能です。

カラーにマウスを乗せた状態

色の値や背景画像のURL部分にマウスを乗せると、その値の色や画像がポップアップしてくれて、その場で視覚的に確認することができます。

では、先程２つプロパティの適用を外した状態のところに、さらにフォントの色を変更してみましょう。

フォントの色を赤色に変更

フォントの色が赤色に変更されてすぐに表示も変わります。

先程、適用を外した二つのプロパティを再び適用して、ついでにフォントも大きくしてみたりします。font-sizeやその他paddingやmarginなどは、変更したいプロパティの値にフォーカスさせて、上キーや下キーを押すと、1pxや1%ずつ値を変化させることができます。

プロパティの追加

適用・未適用や値の変更だけでなく、プロパティを追加することも可能です。

透明度のopacityを追加

セレクタの、プロパティが書かれていない空白の部分（"{"もしくは"}"の部分横の空白）でダブルクリックしたり、右クリックの「新しいプロパティ」で追加することができます。

ここまでのスタイルの適用・未適用や値の変更などは、表示が崩れてしまった時や、ちょっと見た目を修正したい時など、細かな修正で重宝しますので、実際の表示を見ながら修正したいなどの時に活用してみてください。

レイアウトタブ

ここも使っているという人が少なかった箇所。たしかにそんなに使う機会はないかもしれないですが、機能だけは知っておきましょう。ここでは要素をボックスモデルで表示させてみた時の値が表示されます。縦横のサイズ、padding、border、marginのそれぞれの値を上下左右のそれぞれで確認できます。もちろんここでも値の変更が可能。