Firebugを使用してHTMLとCSSを表示・編集する


Firebug公式サイトはFirebugの開発・更新・保守を停止したことを発表し、Firefox内蔵ツールの使用を案内していますDevTools。

説明

この章のチュートリアルでは、Firebugを使用してHTMLとCSSを表示・編集する方法について説明します。

Firebugを使用してHTMLを表示・編集する

表示したい要素の上でマウスを右クリックして、Inspect Element(要素を検証)をクリックします。.

inspect-html-firebug

次にFirebugウィンドウでEdit(編集)をクリックします。 。

inspect-html-firebug1

コード <h1>Components of Firebug</h1> を変更します。

inspect-html-firebug2

Firebugウィンドウでコードを変更するだけで、変更後のコードがブラウザでどのように表示されるかをリアルタイムで確認できます。また、コードを自分のHTMLファイルにコピーすることもできます。


Firebugを使用してCSSを表示・編集する

表示したい要素をマウスで右クリックして、Inspect Element(要素を検証)をクリックします。下図のように、スタイルファイルをクリックします。

inspect-css-firebug

コードを次のように変更して、color:red;タイトルの色を変更します。

変更が完了すると、変更後の効果をすぐに確認できます。

ここで、変更したスタイルをコピーし、元のコードを置き換えて保存し、有効にすることができます:

inspect-css-firebug2

その他の拡張機能