サイト制作を進めていく上でCSSの特性を深く理解し、デザインを再現していくことは必要不可欠なものとなっています。
そんな中で自分が意図しないスタイルが適用されていたらデザインの再現などうまくいきません。
実は自由にスタイルを適用していくために必ず最初にやらなければいけないことがあります。
それがCSSのリセットです。

どうもフロントエンドエンジニアのくめっち（@kume_KROWL）です。
今回はリセットCSSとは何かを解説していき、僕が普段使っているものについても紹介していきたいと思います！

CSSのリセットとは？

CSSは自分で記述したもの以外にもブラウザごとにスタイルの初期値が設定されています。
例えば下記のようなHTMLをGoogle Chromeで表示してみましょう。

<h1><a href='/'>リンク</a></h1>

このような要素が表示されたと思いますが、
・文字の上下の隙間
・文字の色
・文字のサイズ
・文字の下線
などは指定しましたか？

これがブラウザごとに設定されている初期値のスタイルです。
このCSSをリセットしないままサイト制作を進めていくと、
あるブラウザではうまく表示されていても、別のブラウザでは意図しない表示になっているなどの事態が起きてしまいます。

サイト制作を進める上では必ずと言っていいほど必要になってくるので、今回紹介するリセットCSSから自分にあったものを見つけましょう！

一般的なリセットCSSの種類

Web制作の現場でも当たり前のように使われているリセットCSSですが、
自分自身で１から作るのは中々大変な上に、リセットのし忘れなども考えられます。
今回は一般的に広く普及している有名なものをいくつかご紹介していきたいと思います。

Eric Meyer’s “Reset CSS” 2.0

Eric Meyer’s “Reset CSS” 2.0

Eric Meyer氏が作成したリセットCSS。
一番最初に名前が上がるくらいに有名です。
大部分のタグのmargin,paddingを0に指定するなどで基本的なリセットはこれで十分です。
しかし、作成されたのが古いのか対応していないタグも多々見受けられます。

HTML5 Doctor Reset CSS

HTML5 Doctor Reset CSS

上記のEric Meyer’s “Reset CSS” 2.0を最新のHTML5にも対応させたものです。
他のものと比べると純粋なリセットにはこれが適していると思うので、特にこだわりが無い場合などおすすめです。

Yahoo! (YUI 3) Reset CSS

Yahoo! (YUI 3) Reset CSS

Yahoo!が開発したもので上記のEric Meyer’s “Reset CSS” 2.0やHTML5 Doctor Reset CSSなどと並ぶくらい有名です。

Normalize.css

Normalize.css

こちらは上記の3つとは異なり、リセットをした上でデフォルトでよりシンプルなスタイルを適用したものとなっています。
完全なリセットを求めている人には不向きですが、それなりに整ったスタイルを提供してくれるのでCSSの初心者など全部リセットされるとどんなタグなのか分かりづらいという人には適しているのかもしれません。

ress

ress

こちらもデフォルトで整ったスタイルを適用してくれるリセットCSSになります。
上記のNormalize.cssをカスタマイズしたもので、marginやpaddingのリセットがなされていることからこちらを使用している人も多いようです。

Reboot.css

Reboot.css

こちらもリセットCSSの一つですが、BootstrapというCSSのフレームワークとして提供されているものの一部で、基本的にBootstrapとセットで使用されることが多いようです。

現役エンジニアが使用しているリセットCSS

今回は上記にプラスして現役でWebサイト制作に携わっている僕が普段使用しているものもご紹介していきます。
僕は上記のHTML5 Doctor Reset CSSをアレンジして使用しています。

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 vertical-align:baseline;
 background:transparent;
}

body {
 /* プロジェクトによって変動 */
 min-width: 1000px;
 color: #000;
 line-height: 1.6;
 font-weight: 400;
 font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'YuGothic', '游ゴシック', 'メイリオ', Meiryo, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

 width: 100%;
 font-smoothing: antialiased;
 font-variant-numeric: tabular-nums;
 /* safari hover対策 */
 -webkit-font-smoothing: antialiased;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
 display:block;
}

ul, ol {
 list-style:none;
}

blockquote, q {
 quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
 content:'';
 content:none;
}

a {
 margin:0;
 padding:0;
 vertical-align:baseline;
 text-decoration: none;
 color: inherit;
}

/* change colours to suit your needs */
ins {
 background-color:#ff9;
 color:#000;
 text-decoration:none;
}

/* change colours to suit your needs */
mark {
 background-color:#ff9;
 color:#000;
 font-style:italic;
 font-weight:bold;
}

del {
 text-decoration: line-through;
}

abbr[title], dfn[title] {
 border-bottom:1px dotted;
 cursor:help;
}

table {
 border-collapse:collapse;
 border-spacing:0;
}

/* change border colour to suit your needs */
hr {
 display:block;
 height:1px;
 border:0;
 border-top:1px solid #cccccc;
 margin:1em 0;
 padding:0;
}

input, select {
 vertical-align:middle;
}

img {
 vertical-align: bottom;
 line-height: 1.0;
}

button {
 line-height: 1.0;
 background-color: transparent;
 border: none;
 cursor: pointer;
 outline: none;
 padding: 0;
 appearance: none;
}

今回は最低限、必要不可欠なものだけをリセットしていますがフォームが含まれるサイトの場合は他のリセットCSSも追加するなど、サイトに応じて使い分けています。

まとめ

上記で紹介したように有名なリセットCSSは数多くあります。
どれもリセットCSSとして十分な機能が備わっているので今回ご紹介したもののどれを使っても致命的な欠点はありません。
また、今回僕の使用しているリセットCSSでもご紹介したように、実際の現場では上記のものを自分なりに改良して使用しているケースも多いです。

リセットCSSを使いこなすことでより正確なWebサイト制作を進めていきましょう！