なぜこれが必要なのですか？
各ブラウザは、さまざまなHTML要素に対して独自のデフォルトスタイル値を設定します。 CSSリセットを使用すると、この違いを平準化して、クロスブラウザスタイルを確保できます。
たとえば、ドキュメントでa要素を使用します。 Internet ExplorerやFirefoxなどのほとんどのブラウザーは、リンクに青色と下線を追加します。 ただし、5年後に誰かが新しいブラウザを作成することに決めたとしましょう（UltraBrowserと呼びましょう）。 ブラウザの開発者は青い色が気に入らず、下線が煩わしいので、リンクを赤と太字で強調表示することにしました。 これに基づいて、a要素のスタイルのベース値を設定すると、UltraBrowser開発者がそれを表示する方法ではなく、それが見たい方法になることが保証されます。
簡単な例
例1 ：デフォルトでp要素を表示します。
最初の例では、スタイルが確立されていない3つの段落（ p ）をdiv要素内に配置し、青色の背景とオレンジ色の境界線を設定します。
デフォルトでは、Firefoxではdivコンテナの上部境界線と最初の段落の上部境界線の間にギャップがあることがわかります。 同様の状況は、コンテナの下側の境界線で発生します。 ただし、Internet Explorerでは、Firefoxで見られたギャップは見られなくなりました。
それで、どのブラウザがまだ正しいですか？ 実際、問題ではありません。 本当に重要なのは、独自のスタイルを使用して設定しない場合、ブラウザごとにインデントの表示がまったく異なることです。
もちろん、この例は単純化されています。 実際には、CSSリセットを使用して、スタイルのクロスブラウザースタイルを疑問視する可能性のあるルールをリセットします。
少し低めに、実際にスタイルをリセットする作業の機能に触れますが、最初にこのテクニックの形成の歴史に突入します。
どのようにすべてが始まりましたか？
CSSリセットは、2004年にAndrew Krespanisによって最初に適用されました（恐竜でさえネットを歩き回りました）。 彼の記事では、CSSファイルの先頭にユニバーサルセレクター（ * ）を使用して、すべての要素をゼロパディング（マージンとパディング）に設定することを勧めました。
*
{
マージン：0;
パディング：0;
}
ユニバーサルセレクタは正規表現のように機能し、パス内のすべての要素を無差別に容赦なくキャプチャします。 前に他のセレクターを指定しなかったため、インデントはドキュメント内のすべての要素から削除されます（これは理論上のみであり、実際には多少異なります ）。 このようにして、最初の例の問題を解決し、ここでボスであるブラウザを指摘します。 2番目の例の結果を見ることができます。
しかし、現在、個別の段落間を含め、インデントはまったくありません！ どうする 嘘をついたり、恐れたりしないでください。リセット以下で、必要なルールを説明します。 これはさまざまな方法で行うことができます。段落の下部または上部にインデントを指定し、パーセント、ピクセル、またはemで指定します。
最も重要なことは、ブラウザーがルールに従って再生されるのではなく、ルールに従って再生されるようになったことです。 同様の方法で行うことにしました：
* {マージン：0; パディング：0; }
p {マージン：5px 0 10px 0; }
その結果、 3番目の例で見ることができるものを得ました。
その後まもなく、CSSの第一人者であるEric Meyer が、上記のインデントリセット手法についてさらに調査します。 それらの中で、彼はTantek Chelikの作業と、インデントがリセットされただけでなく、他の属性の基本値（フォントスタイル、リストスタイル）も設定された一連のCSSルールundohtml.cssに触れています。
数多くの変更と改良を重ねた後、 CSS Resetと呼ばれる素晴らしいソリューションに至りました 。 その中で、値のリセットはより正確に行われます。ユニバーサルセレクターではなく、要素の名前を直接使用します。 一部のブラウザで境界崩壊が正しく処理されないテーブルなど、「問題のある」要素のデフォルト値を設定します。
もちろん、他の同様のソリューションもあります（Yahoo!のYUI Reset CSS ）。 独自に作成して、レイアウトのニーズを満たすことができます。
CSSリセットアプリケーション
現実の世界でレセプションを使用するいくつかのポイントを詳しく見てみましょう。
1.スタイルをリセットする方法を決定する
上記で、スタイルをリセットする2つの方法を指摘しました。シンプル（ユニバーサルセレクターの使用に基づく）（推奨しません）とEricのスタイルを使用する複雑です。
さらに、Yahoo！からの開発を使用できます。 （YUI CSS Reset）。 サーバーから直接取得できます 。
プロジェクト内の特定のタスクを解決する場合、リセット用の独自のスタイルを作成できます 。 それにもかかわらず、独自のCSSリセットを作成するためのチュートリアルはありません。 独自の原則と独自のスタイルに依存してください。
適切な選択を行うために、さらに2、3のリンクがあります。
- グローバルCSSリセットスタイルのキラーコレクション 。
- 少ないほうがいい-Reset CSS （Ed Elliot）の私の選択 。
2. CSSリセットは、ブラウザに最初に表示されるものです
要素に独自のスタイルを設定した後にスタイルをリセットするのは間違ったアプローチです。 この場合、ブラウザの表示からは何も期待できないはずです。 CSSリセットは必ず最初に含めてから、他のすべてのスタイルを含めるようにしてください。
はい、おかしいように聞こえますが、これは開発者が小さなものから大きなものに至るまでの主な間違いの1つです。 多くの人はそれを忘れています。
論理的な質問をする人もいます：なぜこれが起こっているのですか？ 答えは簡単です。CSSファイルのテキストに以下に記載されている（およびドキュメント内の接続の順序がさらに低い）ルールは、以前に発表されたルールを上書きします。
トピックから遠く離れずに続けましょう。 例にEric Meyerのスタイルを適用しますが、 例4に示すように、プロパティを記述した後です。 数学者は次のように言うでしょう：「証明するために必要なもの」。
3. CSSリセットに別のCSSドキュメントを使用する
私はこのアドバイスに言及する必要があります（いいえ、私は決して強制されませんでした）。 CSSリセットに別のファイルを使用することは、多くの開発者がサポートする一般的な方法です。
実際、このアプローチの生産性が高いため、 1つの大きなCSSファイルを作成する立場にあります 。 しかし、この問題では、私は大多数の意見に同意する傾向があります。CSSリセットは別のファイル（通常、reset.cssと呼ばれる）に移動する必要があります。 この場合、他のCSSルールから分離することなく、さまざまなプロジェクトで使用できます。
4.汎用セレクターの使用を避けてください。
この概念が機能するという事実にもかかわらず、一部のブラウザーとの非互換性のため、そのアプリケーションはほとんどの場合望ましくありません（たとえば、このセレクターはInternet Explorerで正しく処理されません）。 この手法は、単純で、小さく、静的で、予測可能なページに対してのみ使用する必要があります（これを行う必要がある場合）。
このヒントは、CMSのテーマなどのソリューションを開発している場合に特に重要です。 使用方法と変更方法を事前に予測することはできません。 これには、ユニバーサルセレクタの予測不可能な（ボリュームは小さいが）メカニズムを使用するよりも、すべての要素の基本的なCSSルールを記述する方が適切です。
5. CSSリセットを使用する場合、冗長なプロパティの説明を避ける
別のCSSリセットファイルが気に入らないもう1つの理由は、後続のCSSプロパティ宣言の潜在的な冗長性です。 CSSファイルのセット全体で個々のスタイルを繰り返すことは悪い考えであり、避けるべきです。 もちろん、私たちは怠laすぎて苦労して一連のスタイルを試し、それらのいくつかを組み合わせることができますが、少なくとも試してみてください！
Eric Reset CSSに戻ります。 body要素のline-height、color、およびbackgroundのデフォルト値を次のように設定します。
体
{
行の高さ：1;
色：黒;
背景：白;
}
body要素がどのように見えるか既にわかっていると仮定します。
- 背景色：#cccccc;
- 色：＃996633;
- 特定の背景画像を水平方向に繰り返したい場合。
この場合、プロパティを記述するための新しいセレクターを作成する必要はありません-CSSリセットにそれらを含めることができます。 やってみましょう：
体
{
行の高さ：1;
色：＃996633;
背景：#ccc url（tiled-image.gif）左上のrepeat-x。
}
CSSリセット自体を変更することを恐れないでください。 自分で調整し、自分で機能するようにします。 特定のケースで必要に応じて、変更、再構築、クリーニング、および追加します。
Eric Meyer氏は次のように述べています。「誰もがCSSリセットをそのまま使用するべきではない場合。」
追加資料
[WSG]デフォルトのパディング/マージンのゼロ化
おそらく、WSGメーリングリストでユニバーサルセレクタを使用してパディングをリセットすることに関する最初の言及でしょう。
ユニバーサルセレクター
エリック・マイヤーズは、ユニバーサルセレクターの動作メカニズムを研究しています。
CSSリセットなし
Jonathan Snookは、CSSリセットに関する別の視点を提供し、CSSリセットを避ける理由を説明します。 尊敬されるWeb開発者の1人の意見。
Tripoli-HTMLレンダリングのCSS標準
トリポリは、いくつかのバージョンに細分されたもう1つの一般的なCSSリセットです。 あなたに合ったものを選ぶことができます。