Reset CSS

【2019年版】リセットCSSのガイドライン｜基礎から使い方を徹底解説

「リセットCSSが何か知りたい」、 「リセットCSSはたくさんあるけど、どれを選べばよいわからない」 という方にぜひ読んで頂きたい記事です。 この記事では、7つのリセットCSSを反映したHTMLファイルの実行結果を比較検証します。 （リセットCSSのコードはコピペで使えるので、ぜひ参考にしてください。） 記事の結論部分には、書くリセットCSSの特徴とオススメ度をまとめた表も載せているので、結論だけ気になる方はそちらを参照してみて下さい。 まずはじめに、「リセットCSSとは何か？」を解説します。 リセットCSSとは、ブラウザがデフォルトで持っているCSSを打ち消すCSSです。 ブラウザ・・・WEBサイトを閲覧するためのソフトウェアでGoogle ChromeやSafari、Internet Explorerなど様々な種類のものがあります。 各ブラウザは固有のCSSを持っています。（デフォルトのCSSと呼びます。） このデフォルトのCSSの影響で、Webページをデザインするために自分で書いたCSSが本来意図しない表示になることがあります。 ブラウザがデフォルトでCSSを持っているとは一体どういう事でしょうか？具体例を用いて説明します。 下の2枚の画像は同じHTML&CSSのコードをリセットCSSなしの場合とリセットCSSありの場合のブラウザ上でので表示される結果を示しています。（実行環境はGoogle chromeです。） 上の2枚の画像を比較すると、リセットCSSを用いていな方の画像では、ブラウザの左上に少すき間が空いています。 デザインの余白を調整する際には、CSSのmarginやpaddingなどのプロパティを自分で設定します。 しかし、 各ブラウザ（今回はGoogle chrome）がデフォルトで持っているCSSのmarginやpaddingのせいで、本来自分が意図していた配置にならない ということが起きてしまう事があります。 このような事態を防ぐためにリセットCSSを使用します。 リセットCSSという特別な名前が付いてはいますが、CSSであることには変わりません。 普通のCSS（WebページなどをデザインするCSS）と同じように、 リセットCSSが書いてあるCSSファイルをHTMLファイルに読み込みこんで使用します。 リセットCSSはイチから自分で書く必要はなく、有名なものはネットで拾ってきたものをコピペで使うことができます。（コードの内容を深く理解する必要はありません。） これから、現在2019年でもよく使われているリセットCSSを紹介していきます。 コードが長いものもありますが、コピペで使うことができ、内容を深く知る必要もないので安心して読んでください。 これから、よく使われている代表的なリセットCSSを7つほど紹介します。 本記事で取り扱うのは以下の7つです。 Eric Meyer’s “Reset CSS” 2.0 HTML5 Doctor CSS Reset Yahoo!