Firebug の使い方:(X)HTML と CSS の確認・修正方法のまとめ

Firebug の使い方:(X)HTML と CSS の確認・修正方法のまとめ

Posted at July 22,2009 1:55 AM
Tag:[CSS, Firebug, Firefox]

Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。
特に3項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。

Firefbug

動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。

1.基本:(X)HTML マークアップと CSS を表示する

確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。

メニューバーから「表示」→「Firebug」を選択

これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、body 要素が選択状態になっていると思います。

Firebug のウィンドウが表示された状態

注意したいのは、ここでの(X)HTMLやCSSは原本の表示そのままではなく、最適化された状態で表示されることです。最適化されているのは、(X)HTML の各属性の順番やCSSのプロパティの表示順序などです。

2.別のウィンドウで表示する

メニューバーの「ツール」→「Firebug」→「Firebugを新しいウィンドウで開く」を選択します。または Ctrl+F12 を押下します。

メニューバーから「ツール」→「Firebug」→「Firebugを新しいウィンドウで開く」を選択

これで新しいウィンドウで Firebug が開きます。新しいウィンドウで Firebug を開いておけば、閲覧の邪魔にならず、またタブ切り替えにも連動してくれます。

Firebug を新しいウィンドウで開く

3.ページの特定の部分の(X)HTMLマークアップやCSSを確認する

1項または2項で表示された(X)HTML のツリーを展開していけば、目的のマークアップにたどり着けますが、そのようなまどろっこしいことは行なわず、ページ上の確認したい部分にマウスをポイントし、右クリックして「要素を表示」を選択します。下の例は、カレンダーの17日の部分を右クリックしています。

右クリックして「要素を表示」を選択

これで、Firebug の画面左の(X)HTMLマークアップが該当位置まで自動的に展開され、ポイントした部分が反転された状態で開き、画面右には選択した箇所のマークアップに関連する CSS がすべて表示されます。

Firebug のウィンドウで選択した要素を表示した状態

特に CSS はセレクタのカスケード(継承)や、プロパティの有効・無効がすべて表示されるので、CSS を設定したのに反映されてない場合の確認に非常に重宝します。下の図ではプロパティに消し線があるのは無効なプロパティです。

CSSの表示

該当箇所を右クリックして「要素を表示」を選択する代わりに、Firebug 画面左上のアイコン(赤枠部分)をクリックしてから、該当箇所をクリックしても同じ効果があります。

アイコンをクリックして該当箇所を選択する方法

また、左下の(X)HTMLマークアップの要素部分にマウスをポイントすれば、元ページの該当箇所が反転表示され、要素に与えられたレイアウト(magin、padding)が分かります。

ポイント前
ポイント前の画面

ポイント後
ポイント後の画面

水色が要素の内容、青い部分が margin、黄色の部分が padding です。

そして、Firebug の右側ウィンドウ上にある「レイアウト」をクリックすれば、選択した要素のレイアウトが表示されます。

要素のレイアウトを表示

さらに、「レイアウト」の三角をクリックして、「定規と罫線を表示」にチェックを入れた状態にして、

「定規と罫線を表示」をチェック

レイアウトの図をポイントすれば、元のページに定規と(ポイントした箇所に対応する)罫線が表示されます。

定規と罫線を表示

4.CSSを修正する

テンプレートのカスタマイズやレイアウトの不具合の質問を頂いたときに一番重宝するのはこの機能で、CSSをダイナミックに修正することができます。ここではサンプルとして、コメント欄の入力フィールドの長さを変更してみます。

選択している要素(ここではinput)のセレクタで、値を変更したいプロパティの、値の部分をクリックすれば、編集可能な状態になります。中止したい場合は、別の場所をクリックすれば編集状態が解除されます。

変更したいプロパティの値の部分をクリックして編集状態にする

200px から 400px に変更すると、瞬時に現在の表示に反映されます。ページをリロードすれば、変更はすべてクリアされます。

変更した値が現在の表示に反映

既存のプロパティを変更するだけでなく、新しいプロパティの追加も可能です。プロパティを追加したいセレクタの辺りで右クリックして、「新しいプロパティ」を選択します。

「新しいプロパティ」を選択

入力状態になるので、プロパティ名を入力します。

プロパティ名を入力

プロパティ名の入力には補完機能があります。図は「ma」と入力した時点で「rgin」が補完され、「margin」と表示されたところです。

プロパティ名の補完機能

プロパティ名を入力後、Tab を押下すれば値の入力に移動します。プロパティ名と値の間の「:」の入力は必要ありません。値に適当な数値などを入力すれば、元のページに即時に反映されます。行末の「;」の入力も必要ありません。

値の入力

無効にしたいプロパティがあれば、そのプロパティの辺りを右クリックして、「xxxを削除」か「xxxを無効」を選択します。

プロパティの無効化

以上です。

ここでは省略しましたが、Firebug 左側の画面を使えば、(X)HTMLマークアップの修正(属性の追加や要素の編集・削除など)も行えます。

2009.07.23
1項の記述を一部修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

CSS編集に役立つテキストエディタ色々 from 日刊ウェブログ式
CSS編集の際、メモ帳や秀丸などの一般的なテキストエディタでも可能ですが、CSS専用のエディタもなかなかのものです。CSSを編集する機会が多い... [続きを読む]

Tracked on May 5, 2010 4:08 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)