CSS レイアウト

ボックスモデルを視覚化

CSS デザインにおいて、すべての要素は入れ子になったマージン、ボーダー、パディング、およびコンテントのボックスで構成されています。Firebug のどのタブでも、マウスカーソルを HTML 要素に合わせたなら、ページの右部分にその要素のボックスモデルが色分けされて表示されます。例えばマージンとパディングの違いを視覚化するのに、これ以上の方法はありません。

境界を分析

Firebug の [レイアウト] タブはボックスモデルにおける各ボックスと、それぞれの境界の幅の分析結果を視覚的に提供してくれます。さらに、その要素の基準となる親要素からの相対位置を表すxとyのオフセットや、最内部のボックスの幅と高さも表示されます。

ルーラーとガイド

レイアウトタブでボックスの周りにマウスカーソルを移動させてみましょう。その動きに合わせて、ルーラーとガイドが表示されるでしょう。

ルーラーは現在の要素のオフセットに置ける親要素 ── つまり CSS プロパティの left, top, bottom, right とはどこから見てなのか、その基準となる要素 ── を囲みます。ガイドは要素の境界の接線であり、配置にピクセル単位でこだわる人にとっては、複数のボックスの完全な配置にどのくらい近づいているかが判別できる素晴らしい方法です。

動かしたいでしょ？

Firebug の他のタブと同じように、レイアウトタブでも編集が可能です。表示されている数字をクリックすると、小さなエディタが表示されます。CSS エディタと同様、あなたは上下の矢印キーで 1 ずつ、[Page Up] と [Page Down] で 10 ずつ数字を増減させられます。