CSSではHTML内の各要素は「ボックス」という長方形であると考えます。ボックスは以下の図のように入れ子になっています。
プログラミング初心者が 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から以下の図のようにイメージできたら優秀です。
＊内容には文字や画像が表示されます。
慣れてくるとイメージできますが、最初は難しいですよね。ボックスが1つだけならわかるかもしれませんが、数十～数百のボックスを使うことはいくらでもあります。それぞれのサイズを設定するのが、いかに複雑になるかということは簡単に想像できます。
普通はCSSをテキストエディタで編集して、ブラウザで確認してといった手順を繰り返して調整します。この調整が結構難しいのです。
しかし安心してください。Firebug はCSSのボックスを視覚化してくれます。
私もCSSでレイアウトが思ったとおりにできず、長時間悩んだことがありましたが、視覚化できれば原因がすぐわかるので大変助かります。HTMLやCSSが複雑になるほどこの機能は重宝します。
【1】Firefox を起動します。
【2】作成済みの「test.html」を開きます。
＊「\」はWindowsではエンマークのことです。
C:\ajax\sample001\test.html
【3】Firebug を起動します。今回は同一ウィンドウで開きます。
＊「F12キー」を押すと、Firebug がブラウザと同一ウィンドウで開きます。
【4】Firebug の「CSS」をクリックします。
【5】「編集」をクリックします。
【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;
}
＊これは Firebug 上だけの変更です。元のファイルには影響ありません。
【7】CSS を変更すると、Firefox の画面が変わります。
それではボックスを視覚化してみましょう。
【8】Firebug の「HTML」をクリックします。
【9】Firebug の「レイアウト」をクリックします。
【10】レイアウトタブが表示されました。ただしこれは body のレイアウトです。
result のレイアウトに切り替えます。
【11】「調査」をクリックします。
【12】ブラウザ画面で result の部分をクリックします。
＊result は計算結果が出力されている領域です。HTMLファイルでid名を付けましたね。
<div id="result"></div>
【13】result のレイアウトに変わりました。
変更したCSSとレイアウトを比較してください。どのように反映されているかよくわかります。
【14】レイアウト上にマウスを重ねると、ブラウザの画面上で対応する部分がルーラーとガイドで表示されます。
＊レイアウトの濃い青の部分が対象になっています。
・content の時
・padding の時
・border の時
・margin の時
【15】レイアウトの数値を変えると、ブラウザ画面上の content、padding、border、margin のサイズが変化します。
【解説】
(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も同じように書くことができます。
