スポンサード リンク

Ajax Firebugを使ってCSSのボックスを視覚化する方法。

Ajax では、ブラウザ画面のレイアウトによく CSS(Cascading Style Sheets) を利用します。CSS はHTMLに埋め込んだり、外部ファイルとして読み込んだり、JavaScript から動的に書き換えたりします。

CSSではHTML内の各要素は「ボックス」という長方形であると考えます。ボックスは以下の図のように入れ子になっています。

ajax-143.gif

プログラミング初心者が CSS を利用する時に一番戸惑うのは、content、padding、border、margin の指定だと思います。

まずは以下のCSSを見てください。

#result {
  width:100px;
  height:50px;
  font-size:24px;
  color:#0000cc;
  background-color:#CCFFcc;
  padding:10px 10px 10px 10px;
  border:3px solid #000000;
  margin:10px 10px 10px 10px;
}

上のCSSから以下の図のようにイメージできたら優秀です。

ajax-130.gif

*内容には文字や画像が表示されます。

慣れてくるとイメージできますが、最初は難しいですよね。ボックスが1つだけならわかるかもしれませんが、数十〜数百のボックスを使うことはいくらでもあります。それぞれのサイズを設定するのが、いかに複雑になるかということは簡単に想像できます。

普通はCSSをテキストエディタで編集して、ブラウザで確認してといった手順を繰り返して調整します。この調整が結構難しいのです。

しかし安心してください。Firebug はCSSのボックスを視覚化してくれます。

私もCSSでレイアウトが思ったとおりにできず、長時間悩んだことがありましたが、視覚化できれば原因がすぐわかるので大変助かります。HTMLやCSSが複雑になるほどこの機能は重宝します。


【1】Firefox を起動します。

ajax-97.gif


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

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

ajax-98.gif


【3】Firebug を起動します。今回は同一ウィンドウで開きます。

ajax-113.gif

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


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

ajax-115.gif


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

ajax-116.gif


【6】CSSを以下のように変更してください。

#result {
  width:100px;
  height:50px;
  font-size:24px;
  color:#0000cc;
  background-color:#CCFFcc;
  padding:10px 10px 10px 10px;
  border:3px solid #000000;
  margin:10px 10px 10px 10px;
}

ajax-128.gif

*これは Firebug 上だけの変更です。元のファイルには影響ありません。


【7】CSS を変更すると、Firefox の画面が変わります。

ajax-129.gif


それではボックスを視覚化してみましょう。


【8】Firebug の「HTML」をクリックします。

ajax-131.gif


【9】Firebug の「レイアウト」をクリックします。

ajax-132.gif


【10】レイアウトタブが表示されました。ただしこれは body のレイアウトです。

ajax-133.gif


result のレイアウトに切り替えます。


【11】「調査」をクリックします。

ajax-134.gif


【12】ブラウザ画面で result の部分をクリックします。

ajax-135.gif

*result は計算結果が出力されている領域です。HTMLファイルでid名を付けましたね。
<div id="result"></div>


【13】result のレイアウトに変わりました。

ajax-136.gif

変更したCSSとレイアウトを比較してください。どのように反映されているかよくわかります。


【14】レイアウト上にマウスを重ねると、ブラウザの画面上で対応する部分がルーラーとガイドで表示されます。

ajax-137.gif

*レイアウトの濃い青の部分が対象になっています。

・content の時
ajax-138.gif

・padding の時
ajax-139.gif

・border の時
ajax-140.gif

・margin の時
ajax-141.gif


【15】レイアウトの数値を変えると、ブラウザ画面上の content、padding、border、margin のサイズが変化します。

ajax-142.gif


【解説】

(1)ボックスの中は以下のようになります。

content(コンテント) 内容 文字や画像
padding(パディング) コンテントとボーダーの空間
border(ボーダー) 枠線
margin(マージン) ボーダーと他のボックスとの空間
offset(オフセット) 基準となる親要素からの相対位置

*paddingには背景色がつきますが、marginは透明だという点に注意してください。


(2)padding と margin は「上右下左」の順に指定しています。

padding:10px 10px 10px 10px;
margin:10px 10px 10px 10px;


(3)他にもいろいろな書き方があります。

・個別に指定
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

・上下左右
padding:10px;

・上下 左右
padding:10px 10px;

・上 左右 下
padding:10px 10px 10px;

*marginも同じように書くことができます。


スポンサード リンク






Ajax初心者入門講座TOPへ