CSSとはWebページのデザインを定義する規格です。HTMLファイルには論理構造だけを記述し、デザインに関することはCSSファイルにまとめることで、それぞれのファイルがシンプルになります。
またCSSファイルを差し替えるだけで、Webページの見た目をガラッと変えられることもメリットです。最近ではブログでもCSSが使われているので一度は試したことがあると思います。ブログでデザインを選択すると画面が変わりますよね。あれはCSSを差し替えているのです。(CSSとHTML両方変えている場合もあります)
Ajax ではプログラムの結果を画面に出力するときに、動的にCSSやHTMLを変更するので、編集機能はテストに便利です。
ポイントは編集は一時的なものであるということです。元のファイルには影響しませんので、安心してテストできます。
【1】Firefox を起動します。
【2】作成済みの「test.html」を開きます。
＊「\」はWindowsではエンマークのことです。
C:\ajax\sample001\test.html
【3】Firebug を起動します。
＊「F12キー」を押すと、Firebug がブラウザと同一ウィンドウで開きます。
＊「Ctrlキー + F12キー」を押すと、Firebug がブラウザとは別ウィンドウで開きます。
【4】Firebug で「CSS」をクリックします。
【5】「test.css」が選択されていることを確認してください。
1つのHTMLファイルに読み込むCSSファイルは複数設定できます。デザインが複雑になってくるとCSSを分割することもありますので、ここで操作の対象となるCSSを選択します。
【6】「編集」をクリックします。
【7】画面が編集モードに切り替わりました。
【8】フォントサイズを大きくしてみましょう。
font-size:48px;
Firebug での編集が、すぐに Firefox の画面に反映されますね。ただし test.css ファイル自体は元のままです。
【9】フォントの色を変えてみましょう。
color:#ff0000;
【10】CSSは新たに加えることもできます。
width:200px; 幅
border:1px solid #000000; 枠線
【11】デザインを元に戻すには、 Firefox のツールバーにある「再読み込み」ボタンをクリックします。
【12】元に戻りました。
CSSと同じようにHTMLも変更してみることができます。
【13】「HTML」をクリックします。
【14】「編集」をクリックします。
【15】画面が編集モードに切り替わりました。
＊この時、「調査」は押された状態にしないでください。
【16】HTMLの一部を変更すると、ブラウザの画面も変わります。
HTMLも「再読み込み」ボタンをクリックすると元に戻ります。
Firebug での編集は一時的なものです。気に入ったデザインなどはコピーしておいて、ファイルをTeraPadなどのテキストエディタで開き、編集・保存する必要があります。
