スタイルシートって1から作るのも大変だけど、MovableTypeと言った既成ブログツールのデフォルト状態から、カスタマイズしていくのも同じくらい大変です。後者の場合、一番大変なのは既定のクラスやIDが実際のHTMLでどこからどこまで割り当てられているかを、割り出すのが面倒ですよね。

で、試しにFirefox3に追加してあったけど使っていなかったFirebugを試してみたら、一目瞭然。
一目でスタイルシートの各設定項目が、HTMLのどの部分に影響しているか分かる!!


クリックすると大きな画面で開きます。

上の画像の下の方が、Firebugをインストールして、ツール＞Firebug＞開く で出てくる画面。
開いているページのHTMLソースが下画面の左半分に表示されています。

まずこのHTMLソースの表示方法が秀逸で、タグを閉じたり、開いたりして表示することができるんですね。なので<div>タグでどんどん入れ子状態にしていっても、対応する<div>タグを別々に閉じることが出来るので、非常に構造が把握しやすい。
この表示方法でソースを表示できるHTMLエディタがあったらすぐ欲しいですね。もちろん<div>タグ以外のタグも 開いたり閉じたりできます。

次にその<div>の部分にマウスを載せると、上の実際のWEB画面でその<div>タグの範囲がリアルタイムに表示されます。上の画像で言うと紫の枠で囲まれて、水色の半透明で塗りつぶされた範囲です。
スタイルシートの編集時には、非常に有り難い機能。
Firebugがあれば、もうスタイルシートも怖くありません。

他の機能はまだ試していないので、またFirebugのレポートをすると思いますが、まだ試していないWEB制作者さんはとにかく試してみることをお薦めします。

Firebug