デフォルトスタイルをリセットする

ブラウザにはデフォルトスタイルというものがあります。CSS を何も指定してない時に h1 要素の文字サイズが大きかったり、address 要素が斜体フォントで表示されたりするのは、ブラウザのデフォルトスタイルシートの表示結果なのです。

このデフォルトスタイルを最初に殺すことで、ブラウザ毎の表示差異を少なくしようということです。

CSS を記述する際に、最初に全称セレクタで、以下のように指定します。行間 (line-height:1.4;) と文字色 (color:#000;) は自由に変えて構いません。

* {
    margin:0;
    padding:0;
    line-height:1.4;
    color:#000;
    background:transparent;
    font-style:normal;
    font-weight:normal;
    font-size:100%;
    text-decoration:none;
    }

フォント指定しても問題ない場合は、フォント系のプロパティをまとめることも出来ます。font プロパティの normal normal normal は消しても構いません (font プロパティに書かなかった値は初期値が適用される為)。フォントは sans-serif の部分を変更します。

* {
    margin:0;
    padding:0;
    color:#000;
    background:transparent;
    font:normal normal normal 100%/1.4 sans-serif;
    text-decoration:none;
    }

現在のこのサイトは、これを最初に書いているのですが、

font-size:100%; は IE6 でユーザ補助機能を有効にすると表示が乱れる
line-height を指定すると、一部分だけの変更が難しくなる

などの問題もあるので、場合によって必要なものだけを記述するようにしましょう。

最低限必要なのは margin:0; padding:0; で、その次に書いておくと良いのが font-weight:normal; font-style:normal; 辺りです。

又、最近は全称セレクタを使わず、そのサイトで使う要素を全部指定する、という書き方も多くなって来ています。レンダリングされるまでの時間が短くなるからだそうです。

画像の下の隙間をなくす

Doctype 宣言で標準準拠モードの時、画像の下に隙間が開いてしまいます。

これを直すソースを、デフォルトスタイルのリセットと一緒に入れておくと良いでしょう。画像をリンクした際に出る枠線を消す border:0; も一緒に入れてあります。CSS デザインの定石ですね。

img {
    border:0;
    vertical-align:bottom;
    }

Navi