CSSのデフォルトの設定をリセット

CSSを利用しようとしたとき、HTMLタグのデフォルト設定が邪魔になるときがあります。そこで、多くのデザイナーはそれらを無効にして CSSを利用してタグをデザインしなおすということを行っています。

ページをデザインする際に必ず利用するような場合、定義をテンプレートとして用意しておくと便利です。また、テンプレートも自分で定義するのも良いし、他の人の定義で使いやすいものを利用するのも良いでしょう。

利用方法としては

  1. リセットを定義した CSSのテンプレートをはじめに読み込む

  2. デザインに応じた共通の定義をタグに対して行う(または、定義したファイルを読み込む)

  3. 必要に応じて、個別の定義を行う(または、定義したファイルを読み込む)

CSSリセットの定義

CSSリセットとして有名なものを紹介しておきます。実際にどのようにリセットされるかサンプルも用意しておきます。

  1. CSSリセットを行っていないデフォルト

  2. Eric Meyer氏の CSSリセット

  3. Yahooの CSSリセット

  4. html5doctorの CSSリセット