こんにちは、Webプログラマー見習いのトムです。
今回はリセットCSSについての解説です。正直に申しますがワタクシ、つい先日までこのリセットCSSの役割をちゃんと理解できていませんでした（大汗）。HTMLとCSSでWebサイトを構築する上ではめちゃめちゃ大事なツールなので、ぜひ内容を理解しましょう。
今回のポイント・・・トムのお勧めリセットCSSはress。headタグに1行コピペするだけで使えるので楽ちんです
リセットCSSの役割
さてそもそもリセットCSSは何をしてくれるツールなのか？ということですが、答えは「Webブラウザの種類に関わらずCSSの設定をリセットしてくれる」ツールです。
世の中で使われている様々なWebブラウザは固有のCSSを持っていて（デフォルトCSSと言います）、Webサイトの表示の際にも使われています。例えば<a>タグで囲まれた文字は青色になり下線が引かれるブラウザが多いと思いますが、これはデフォルトCSSの設定によるものです。
<a>タグの仕様は誰もが知っているレベルなので驚きませんが、実際にコーディングしていてこのリセットCSSを使わなかった場合、特定のブラウザで思わぬところで謎のスペースが出てきたりと、非常に困ったことになります。なので忘れずに使うことでブラウザの違いを考慮することなく、コーディングをスムーズに進められるようにしましょう。
オススメのリセットCSS
世の中には様々なリセットCSSが出回っています。私のお勧めは ress になります。head部分に以下の一行定型文を記述するだけで簡単に使うことができるので、非常に簡単で便利です。
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">ちなみに↑の1行を書く位置が重要で、自分が作成するCSSよりも前に記述してください。Webブラウザは上から下にマークアップ言語を読み込むので、一旦リセットCSSでCSSをリセットしてから、ユーザが記述したCSSを読み込む、という順番でないといけません。
リセットCSSの有無での挙動の違い
実際にリセットCSSがある場合とない場合での挙動の違いの一例を示します。下はリセットCSSの記述が無い場合です。
リセットCSS無し
See the Pen NO_Reset_CSS_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
注目して頂きたいのは赤色の領域の上下に空白があることです。HTMLやCSS上では上下で連続したブロック領域のはずで、marginなども一切定義していませんが空白ができてしまっています。
これはデフォルトCSSが<section id=”header”>配下にある<h1>タグの上下にmarginがつく設定になっており、marginの領域が空白として表示されているからです（firefox、Edge、Chromeでは全て同じ挙動になりました。他のブラウザは試していません）
ではリセットCSSを設定した場合の挙動はどうなるかを確認してみましょう（headタグにリセット
CSSを追加した部分以外は変更していません）
リセットCSS有り
See the Pen Reset_CSS_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
リセットCSS無しの場合と異なり空白は出てきておらず、赤の領域とグレーの領域が上下で連続して表示されるようになりました。これはリセットCSSにより<h1>タグのmargin設定がゼロにリセットされたためです（実際にはh1だけでなくh2～h6、pなどのmarginもゼロにリセットされます）。
以上、リセットCSSについて解説しました～
