CSS

先日も書いたように、現在着々と製作が進んでいる『egg』ではあるが、昨日は大変な苦労をしてしまった。Photoshopでの作業は一段落し、GoLiveでトップページを作っていたところだが、CSSが上手く働かない。サイトの設計は黄金比で固定した枠組みの中にコンテンツを入れようというものであるが、右上にナビゲーションが欲しい。そこでJavaScriptでマウスオーバーに反応し、展開するという良く見かけるナビゲーションを考えていた。JavaScriptの実装を前に、アクセシビリティの観点からXHTMLの一番最後に記述したナビゲーションをCSSのpositionを使って右上に絶対位置指定で持ってくる作業をしていたのだが、ここで問題が発生した。IEでは正しく表示されるが、FirefoxやOperaでは下にずれるのだ。逆にFirefoxやOperaにあわせるとIEでは少し上にずれる。ここで昨日はギブアップ。
今日になり、少し考えると、この差はブラウザの初期値によるものであると気付いた。ブラウザは必ず初期値を持っていて、それはブラウザごとに全く違ったものとなる。そこに気付いた僕はCSSでmarginとpaddingの初期値を無効にすることにした。具体的にはCSSファイルの中に

*{
    margin: 0;
    padding: 0;
    }

と記述する。こうするだけであらゆる要素のmarginやpaddingが0になる。これを書くか書かないかで随分と違う。実際に僕のトラブルはこれで解決してしまった。FirefoxやOperaはmarginやpaddingの初期値がそれなりにあるようだ。基本的なことではあるが、忘れていると非常に苦労する。注意点としては全てのmargin、paddingが0になるので必要な部分は自分で設定しないと非常に見栄えがよくない。
このように、ブラウザの初期値をリセットするという技法は非常に便利であるし、marginやpaddingのほかにもリセットできる部分は多い。しかし、あまりやりすぎると自分で設定するところが増え、余計に煩雑になってしまうことがある。何事もほどほどが肝心だ。