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

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

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

ブラウザにはデフォルトスタイルというものがあります。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;
    }