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

スタイル指定が楽になる、というお話。

• デフォルトスタイルをリセットする
• 画像の下の隙間をなくす

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

ブラウザにはデフォルトスタイルというものがある。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; も一緒に入れてある。

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