ウェブの構造把握に便利なFirefoxアドオン「Firebug」(3ページ目)

デザインの試行錯誤が簡単にできる編集機能が便利

■表示されているソースは編集もできる
Firebug内に表示されているソースは、一時的に変更してみることができます。それによって、表示がどう変化するのかをリアルタイムに確認できるため、デザインの試行錯誤が楽になります。


■特定のCSSプロパティの適用を、簡単にON/OFFできる
Firebug上に表示されているCSSソースは、左端の余白部分をクリックすることで、その行のスタイルを簡単に無効にできます。無効にすると、それに併せて実際の描画も変化します。

デザインを試行錯誤する過程では、「このCSSを記述しなかった場合に、どんな表示になるだろう？」と思うことがあります。この機能を使えば、「CSSソースを直接編集して保存」→「ブラウザで再読込」のような面倒な手順を踏むことなく、簡単に「そのCSSを記述しなかった場合」の表示結果が分かって便利です。

■CSSプロパティ名やプロパティ値を変更できる
Firebug上に表示されているCSSソースの、値の部分をマウスでクリックすれば、その値を自由に編集できるようになります。値を変更すれば、それに併せて実際の描画も変化します。

デザインを試行錯誤する過程では、値を様々に変えてみて微調整したいと思うことがよくあります。この機能を使えば、（一時的に）何度でも値を変更して表示確認ができて便利です。なお、値だけでなく、プロパティ名の変更も可能ですから、とても柔軟に試行錯誤ができます。

■HTMLの要素名・属性名・属性値も簡単に変更できる
Firebug上に表示されているHTMLソースの特定の位置をクリックすることで、要素名・属性名・属性値を自由に変更することができます。変更結果は、すぐに描画に反映されます。

これによって、例えばclass名を変更・追加・削除してみたり、classではなくidに変えてみたり、要素を「div」から「p」に変えてみたり、様々な試行錯誤が簡単にできて便利です。

■HTMLソースの当該箇所をまるごと編集できる
Firebug上のHTMLソース表示部分の左上にある「編集」ボタンをクリックすることで、HTMLソースをまるごと編集できるようになります。この機能によって、要素や属性を含めて大きく変更したり、前後に他の要素を追加してみたり、様々な試行錯誤ができます。

編集対象は、「そのとき選択されている要素」のある領域（＝描画領域でハイライト表示されている箇所）に限られるので、（余分な箇所を含めずに）編集したい範囲を絞って効率よく試行錯誤ができます。

■枠線や余白量を直感的に変更して、表示の変化を試せる
前ページでご紹介したように、「レイアウト」タブをクリックすると、当該要素の内容サイズ、枠線サイズ、余白サイズが確認できます。ここで、上下左右に表示されている数値をクリックすれば、そのサイズを直接修正できます。

この機能によって、例えば「上部のマージン（外側の余白）を10ピクセル増やしてみる」など、サイズに関する試行錯誤が、CSSソースに触ることなくとても直感的にできて便利です。

上記でご紹介したように、Firebugには、ウェブ作成の試行錯誤を強く支援してくれる便利な機能があります。HTMLファイルやCSSファイルを直接編集・保存してからブラウザで再表示させるよりも、はるかに手軽で素早く試行錯誤ができるでしょう。

次に、ウェブページの表示速度を解析したり、スクリプトのデバッグをしたりできる、Firebugのその他の機能を簡単にご紹介致します。