リセットCSS

各ブラウザ（IE、FireFox、Chrome、safariなど）は、要素毎にデフォルトでスタイルを独自にもっており、ブラウザーによって表示が異なる場合があります。それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。
元々持っているブラウザーのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザー間の表示誤差(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始める、という考え方です。

リセットCSSの記述

リセットCSSの記述方法は色々あり、絶対的な物があるわけでありません。ネット上から既存のリセットCSSをダウンロードして、使用する場合もありますが、まずは1個づつ意味をしっかりと理解し、慣れてきたら徐々に複雑な物を使用して行きましょう。

/* reset */
HTMLで使用しているセレクター名 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

ブラウザーのデフォルトスタイルではol、ul にそれぞれ黒丸と番号が付いてしまいます。
それらを消す場合は以下の記述をリセットCSSに追加しましょう。

ul, ol {
  list-style: none; /* マーカーを消す */
}

さらに以下の記述も追加しましょう。

a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;/* リンクが設定されたimgにつくborderを消す */
}
img, input {
  vertical-align: bottom;
}

リセットCSSの例

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, th, td {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}