スポンサード リンク

Ajax Firebugを使ってCSSを編集する方法。

Firebug はプログラムの実行中に、CSS(Cascading Style Sheets)やHTMLを一時的に変更してみることができます。

CSSとはWebページのデザインを定義する規格です。HTMLファイルには論理構造だけを記述し、デザインに関することはCSSファイルにまとめることで、それぞれのファイルがシンプルになります。

またCSSファイルを差し替えるだけで、Webページの見た目をガラッと変えられることもメリットです。最近ではブログでもCSSが使われているので一度は試したことがあると思います。ブログでデザインを選択すると画面が変わりますよね。あれはCSSを差し替えているのです。(CSSとHTML両方変えている場合もあります)

Ajax ではプログラムの結果を画面に出力するときに、動的にCSSやHTMLを変更するので、編集機能はテストに便利です。

ポイントは編集は一時的なものであるということです。元のファイルには影響しませんので、安心してテストできます。


【1】Firefox を起動します。

ajax-97.gif


【2】作成済みの「test.html」を開きます。

*「\」はWindowsではエンマークのことです。
C:\ajax\sample001\test.html

ajax-98.gif


【3】Firebug を起動します。

ajax-71.gif

*「F12キー」を押すと、Firebug がブラウザと同一ウィンドウで開きます。
*「Ctrlキー + F12キー」を押すと、Firebug がブラウザとは別ウィンドウで開きます。


【4】Firebug で「CSS」をクリックします。

ajax-100.gif


【5】「test.css」が選択されていることを確認してください。

ajax-101.gif

1つのHTMLファイルに読み込むCSSファイルは複数設定できます。デザインが複雑になってくるとCSSを分割することもありますので、ここで操作の対象となるCSSを選択します。


【6】「編集」をクリックします。

ajax-102.gif


【7】画面が編集モードに切り替わりました。

ajax-103.gif


【8】フォントサイズを大きくしてみましょう。

font-size:48px;

ajax-104.gif

Firebug での編集が、すぐに Firefox の画面に反映されますね。ただし test.css ファイル自体は元のままです。


【9】フォントの色を変えてみましょう。

color:#ff0000;

ajax-105.gif


【10】CSSは新たに加えることもできます。

width:200px; 幅
border:1px solid #000000; 枠線

ajax-106.gif


【11】デザインを元に戻すには、 Firefox のツールバーにある「再読み込み」ボタンをクリックします。

ajax-107.gif


【12】元に戻りました。

ajax-108.gif


CSSと同じようにHTMLも変更してみることができます。


【13】「HTML」をクリックします。

ajax-109.gif


【14】「編集」をクリックします。

ajax-110.gif


【15】画面が編集モードに切り替わりました。

ajax-111.gif

*この時、「調査」は押された状態にしないでください。


【16】HTMLの一部を変更すると、ブラウザの画面も変わります。

ajax-112.gif


HTMLも「再読み込み」ボタンをクリックすると元に戻ります。


Firebug での編集は一時的なものです。気に入ったデザインなどはコピーしておいて、ファイルをTeraPadなどのテキストエディタで開き、編集・保存する必要があります。


スポンサード リンク






Ajax初心者入門講座TOPへ