リセットCSS

Webブラウザごとに、本来持っているスタイルがあります。Webサイトを構築していく上で、そのスタイル情報が邪魔になってしまう事があります。つまり、邪魔された情報によって自分が組みたいように、Webサイトのレイアウトを組む事が出来ないという事態が起きてしまうわけです。

そんな事態を防ぐ技術のことを「リセットCSS」と呼びます。
現場のデザイナーやプログラマーも共通して使われてきた技術で、Googleなどで検索すると、常にその
技術は更新されているようです。

リセットCSSを行う上では、2つの手法があると言われています。

• ページ全体的にリセットを行う手法
• 各セクションやメニューバーなど、部分的にリセットを行う手法

ここでは、2つの手法について細かく教えて行きたいと思います。

ページ全体的にリセットを行う場合

* {
   margin: 0;
   padding: 0;
}

ページ全体に対してリセットを行う際は「*(アスタリスク)記号」を使用します。
「*」＝「ページ全体」という意味になるので、「ページ全体の外側余白と内側余白」を「0」に設定することになります。

部分的にリセットを行う場合

/*reset*/
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 addres, ul, ol, dl, dt, dd, table, th, td, form, fieldset{
  margin:0;
  padding:0;
  line-height:1.0;
}
ul,ol{
  list-style:none;/*黒丸を消す*/
}
a{
text-decoration: none;/*下線を消す*/
}
img{
 border:0;
}

部分的にリセットCSSを行う場合は、どの部分がどういう機能を持っているかを把握しておく必要があります。
例えば、

a { text-decoration: none;}

というのは、「リンクの下線を消す」という意味があります。
他のセレクタに充てることはできるが、効果を十分に発揮することはできません。
効果を十分に発揮してもらうためにも、「セレクタに合ったリセットCSS」を心がけなければなりません。

しかし、Web制作の初心者であれば、ページ全体的にリセットCSSを適用する手法を使うのが得策でしょう。