【2019年版】リセットCSSのガイドライン|基礎から使い方を徹底解説 | プログラミング入門ならWEBCAMP NAVI
【11月枠も残りわずか】転職保証コース

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

「リセットCSSが何か知りたい」「リセットCSSはたくさんあるけど、どれを選べばよいわからない」という方にぜひ読んで頂きたい記事です。

この記事では、7つのリセットCSSを反映したHTMLファイルの実行結果を比較検証します。
(リセットCSSのコードはコピペで使えるので、ぜひ参考にしてください。)

記事の結論部分には、書くリセットCSSの特徴とオススメ度をまとめた表も載せているので、結論だけ気になる方はそちらを参照してみて下さい。

リセット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であることには変わりません。

普通のCSS(WebページなどをデザインするCSS)と同じように、リセットCSSが書いてあるCSSファイルをHTMLファイルに読み込みこんで使用します。

リセットCSSはイチから自分で書く必要はなく、有名なものはネットで拾ってきたものをコピペで使うことができます。(コードの内容を深く理解する必要はありません。)

これから、現在2019年でもよく使われているリセットCSSを紹介していきます。
コードが長いものもありますが、コピペで使うことができ、内容を深く知る必要もないので安心して読んでください。

コピペで使える!代表的なリセットCSSを紹介

これから、よく使われている代表的なリセットCSSを7つほど紹介します。

本記事で取り扱うのは以下の7つです。

  1. Eric Meyer’s “Reset CSS” 2.0
  2. HTML5 Doctor CSS Reset
  3. Yahoo! (YUI 3) Reset CSS 
  4. Universal Selector ‘*’ Reset
  5. Normalize.css
  6. ress 
  7. sanitize.css

実行結果と箇条書きでまとめてある特徴をみて好みのものをコピペして使用してみて下さい。

リセットCSSを反映していないHTML

まずはリセットCSSを用いていないHTMLファイルを実行して、ブラウザ上での表示を確認してみましょう。
こちらが本記事で比較元となるHTMLです。

sample.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- ↓の#に読み込みたいCSSファイル名を入れて下さい-->
    <link rel="stylesheet" href="#.css">
    <title>sample.html</title>
</head>
<body>
	<h1>見出し1</h1>
	<h2>見出し2</h2>
	<h3>見出し3</h3>
	<p>テキスト</p>
	<a href="#">リンク</a>
	<p><strong>太字</strong></p>
	<p><small>小文字</small></p>
	<ul>
		<li>リスト1</li>
		<li>リスト2</li>
		<li>リスト3</li>
	</ul>
	<ol>
		<li>順序リスト1</li>
		<li>順序リスト2</li>
		<li>順序リスト3</li>
	</ol>
	<form>
		<div>
			<input type="text" value="1行テキストボックス">
		</div>
		<div>
			<input type="submit">
		</div>
		<div>
			<label><input type="checkbox">チェックボックス</label>
		</div>
	</form>
</body>
</html>

ブラウザ上での表示画面

リセットCSSを全く用いていないHTMLは、ブラウザ上でこのように表示されます。

リセットCSSなしの特徴
  • リセットCSSの説明で紹介したように、ブラウザの周りに余白が空いている
  • 見出しなどの全ての要素の上下に余白がある

これから、こちらのHTMLに各リセットCSSを適応して、ブラウザ上での表示を比較していきます。

①Eric Meyer’s “Reset CSS” 2.0

リセットCSSのソースコード

https://meyerweb.com/eric/tools/css/reset/

Eric.css
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
コード全体はこちらをクリック

ブラウザ上での表示画面

Eric Meyer’s “Reset CSS” 2.0の特徴
  • 全ての余白が消える(ブラウザの周辺、見出しなどの要素の上下など全て)
  • 見出しや太字などの設定が消え、文字のサイズもリセットされ全て同じになる
  • テキストボックスや送信ボタンなどの<input>要素はブラウザ固有のものになる

といった点がこのリセットCSSの特徴です。

余白や文字サイズの設定が全てリセットされるので、いちいちリセットCSSを意識する必要がないので、慣れると非常に便利に感じます。

まっさらな状態から、全て自分でデザインを調整したい方にオススメです。

しかし、このEric Meyer’s “Reset CSS” 2.0は、一部のタグがHTML5に対応していないことがあります。

したがって、次に紹介するHTML5 Doctor CSS Resetを使用する事をオススメします。

②HTML5 Doctor CSS Reset

リセットCSSのソースコード

http://html5doctor.com/html-5-reset-stylesheet/

Doctor.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;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
}

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

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

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

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

/* 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;
}
コード全体はこちらをクリック

ブラウザ上での表示画面

HTML5 Doctor Reset CSS 2.0の特徴
  • 全ての余白が消える(ブラウザの周辺、見出しなどの要素の上下など全て)
  • 見出しや太字などの文字サイズはリセットされ全て統一されるが、文字の太さはリセットされない
  • テキストボックスや送信ボタンなどの<input>要素はブラウザ固有のものになる

HTML5 Doctor CSS Resetは、一つ前に紹介したEric Meyer’s Reset CSS 2.0の欠点である一部のタグがHTML5に対応していないという欠点を克服したリセットCSSです。

すべてをリセットするので、ブラウザのCSSを気にする必要がなく、慣れてくると非常に使いやすいです。
余白(paddingやmarginなど)も全て自分で記述します。

まっさらな状態から、全て自分でデザインを調整したい方にオススメです。

③Yahoo! (YUI 3) Reset CSS

リセットCSSのソースコード

https://yuilibrary.com/yui/docs/cssreset/

yui3.css
/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * https://cssreset.com/
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */
/*
  TODO will need to remove settings on HTML since we can't namespace it.
  TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
  color:#000;
  background:#FFF;
}
/*
  TODO remove settings on BODY since we can't namespace it.
*/
/*
  TODO test putting a class on HEAD.
    - Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,
img {
  border:0;
}
/*
  TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style:normal;
  font-weight:normal;
}
 
ol,
ul {
  list-style:none;
}
 
caption,
th {
  text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,
q:after {
  content:'';
}
abbr,
acronym {
  border:0;
  font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
  vertical-align:text-top;
}
sub {
  vertical-align:text-bottom;
}
input,
textarea,
select {
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
  *font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
  color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none;
コード全体はこちらをクリック

ブラウザ上での表示画面

Yahoo!(YUI3) Reset CSSの特徴
  • ブラウザの周りの余白はリセットされているが、要素の上下の余白は少しだけ空いている
  • 見出しや太文字の文字の太さはリセットされていて、見出しの文字サイズはリセットされているが、小文字の文字サイズはリセットされていない
  • テキストボックスや送信ボタンなどの<input>要素はブラウザ固有のものになる

Yahoo! (YUI 3) Reset CSSも前から人気のCSSですが、使用はあまりオススメしません。

その理由は、Eric Meyer’s “Reset CSS” 2.0と同じように一部のHTML5タグが対応していないことがあるからです。

また、このリセットCSSは過去5年間更新がありません。
もし、コーディングスタイルが変わった時に対応できなくなってしまう恐れがあります。

特別な理由がない限り(慣れているなど)、他のリセットCSSを使ったほうがいいです。

④Universal Selector ‘*’ Reset

リセットCSSのソースコード

universal.css
* { 
  margin: 0;
  padding: 0; 
}

ブラウザ上での表示

Universal Selector '*' Resetの特徴
  • 全ての余白をリセットしている(‘*’はユニバーサルセレクタといい全ての要素を指定するときに使用します
  • 余白以外はリセットしないので、文字の太さや大きさなどはデフォルトのものが反映されます

こちらのUniversal Selector ‘*’ Resetを使用することもオススメしません。

その理由は、Webページの読み込み速度が遅くなるからです

あまり使用しないようなHTMLも含めて全てリセットにかけるので、ブラウザの読み込み速度を落とします。

<ul>や<ol>などのリストや<table>(表)などが持つ余白はあらかじめ良い感じに調整されているのにも関わらずリセットしてしまうのも、このリセットCSSの良くないところです。

⑤Normalize.css

リセットCSSのソースコード

https://github.com/necolas/normalize.css/blob/master/normalize.css

normalize.css
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
コード全体はこちらをクリック

ブラウザ上での表示画面

Normalize.cssの特徴
  • ブラウザ周りの余白はリセットされる
  • 見出しや文字の上下の余白はリセットされず、文字のサイズと太さもリセットされない
  • 有用なデフォルトのCSSはリセットしない(リストの余白など)

Normalize.cssの特徴は、デザインに支障がでないデフォルトのCSSをリセットせずに保持することです。

全てを自分でデザインしなくても、デフォルトの状態でそれなりに整ったデザインをすることが可能なので非常に使い勝手が良いです。

⑥ress

リセットCSSのソースコード

https://github.com/filipelinhares/ress

ress.css
/*!
 * ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 */

/* # =================================================================
   # Global selectors
   # ================================================================= */

html {
  box-sizing: border-box;
  overflow-y: scroll; /* All browsers without overlaying scrollbars */
  -webkit-text-size-adjust: 100%; /* iOS 8+ */
}

*,
::before,
::after {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */

/* Add the correct display in iOS 4-7.*/
audio:not([controls]) {
  display: none;
  height: 0;
}

hr {
  overflow: visible; /* Show the overflow in Edge and IE */
}

/*
* Correct `block` display not defined for any HTML5 element in IE 8/9
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox
* Correct `block` display not defined for `main` in IE 11
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

summary {
  display: list-item; /* Add the correct display in all browsers */
}

small {
  font-size: 80%; /* Set font-size to 80% in `small` elements */
}

[hidden],
template {
  display: none; /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: 1px dotted; /* Add a bordered underline effect in all browsers */
  text-decoration: none; /* Remove text decoration in Firefox 40+ */
}

a {
  background-color: transparent; /* Remove the gray background on active links in IE 10 */
  -webkit-text-decoration-skip: objects; /* Remove gaps in links underline in iOS 8+ and Safari 8+ */
}

a:active,
a:hover {
  outline-width: 0; /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* Specify the font family of code elements */
}

b,
strong {
  font-weight: bolder; /* Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ */
}

dfn {
  font-style: italic; /* Address styling not present in Safari and Chrome */
}

/* Address styling not present in IE 8/9 */
mark {
  background-color: #ff0;
  color: #000;
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* # =================================================================
   # Forms
   # ================================================================= */

input {
  border-radius: 0;
}

/* Apply cursor pointer to button elements */
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
  cursor: pointer;
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

[type="number"] {
  width: auto; /* Firefox 36+ */
}

[type="search"] {
  -webkit-appearance: textfield; /* Safari 8+ */
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; /* Safari 8 */
}

textarea {
  overflow: auto; /* Internet Explorer 11+ */
  resize: vertical; /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
  font: inherit; /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold; /* Restore the font weight unset by the previous rule. */
}

button {
  overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: 0;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

button,
select {
  text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

/* Style select like a standard input */
select {
  -moz-appearance: none; /* Firefox 36+ */
  -webkit-appearance: none; /* Chrome 41+ */
}

select::-ms-expand {
  display: none; /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentColor; /* Internet Explorer 11+ */
}

legend {
  border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
  display: table; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge and IE */
  white-space: normal; /* Correct the text wrapping in Edge and IE */
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */
  font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

[type="search"] {
  -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px; /* Correct the outline style in Safari */
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */

img {
  border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden; /* Internet Explorer 11- */
}

audio,
canvas,
progress,
video {
  display: inline-block; /* Internet Explorer 11+, Windows Phone 8.1+ */
}

/* # =================================================================
   # Accessibility
   # ================================================================= */

/* Hide content from screens but not screenreaders */
@media screen {
  [hidden~="screen"] {
    display: inherit;
  }
  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}

/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
  cursor: default;
}

/* # =================================================================
   # Selection
   # ================================================================= */

/* Specify text selection background color and omit drop shadow */

::-moz-selection {
  background-color: #b3d4fc; /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc; /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}
コード全体はこちらをクリック

ブラウザ上での表示画面

ress.cssの特徴
  • ブラウザ周り、各要素の上下の余白がすべてリセットされる・見出しなどの文字のサイズと太さはリセットされない
  • <input>のテキストボックスやボタンも全てリセットされる

ress.cssはnormalize.cssをさらに使いやすくするためにアップデートされたCSSです。

normalize.cssとの大きな変更点は、すべての要素のpaddingとmarginをリセットすること<input>要素の標準スタイルを打ち消すことなどです。(ほかにも色々とnormalize.cssを使いやすく改良する設定がなされています。)

⑦sanitize.css

リセットCSSのソースコード

https://csstools.github.io/sanitize.css/

sanitize.css
/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

*,
::before,
::after {
  box-sizing: border-box;
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
 * 1. Add the correct sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */

hr {
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */

nav ol,
nav ul {
  list-style: none;
  padding: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */

iframe {
  border-style: none;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg:not([fill]) {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */

/**
 * Collapse border spacing in all browsers (opinionated).
 */

table {
  border-collapse: collapse;
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

button,
input,
select {
  margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */

button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */

fieldset {
  border: 1px solid #a0a0a0; /* 1 */
  padding: 0.35em 0.75em 0.625em; /* 2 */
}

/**
 * Show the overflow in Edge 18- and IE.
 */

input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */

textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
}

/**
 * Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:-moz-ui-invalid {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct display in Edge 18- and IE.
 */

details {
  display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* User interaction
 * ========================================================================== */

/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation; /* 1 */
  touch-action: manipulation; /* 2 */
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}
コード全体はこちらをクリック

ブラウザ上での表示画面

sanitize.cssの特徴
  • ブラウザ周りの余白はリセットし、見出しなどの要素の上下の余白はリセットしない
  • 文字のサイズと太さはリセットしていない
  • 見た目はnormalize.cssと似ている(こちらのほうが少し余白の幅が広い)

sanitize.cssnormalize.cssの共同開発者が開発したこともあり、normalize.cssの思想を受け継いでいます。

normalize.cssと同じように有用なデフォルトのCSSをそのまま保持し、バグを修正し、ユーザビリティを高められています。
他にも、スマホなどのモバイルに対応していることもsanitize.cssの特徴の一つです。

結論:ひと目でわかる表でオススメを紹介

 

これまでに紹介してきた、7つのリセットCSSの大まかな特徴を下の表にまとめました。

特徴 オススメ度
Eric Meyer’s “Reset CSS” 2.0 ・余白や文字の設定を全てリセットするので、イチから自分でデザインできる。一部のHTML5のタグに対応していない
HTML5 Doctor CSS Reset ・余白や文字の設定を全てリセットするので、イチから自分でデザインできる
・Eric~CSSの進化版
★★★
Yahoo! (YUI 3) Reset CSS ・ブラウザ周りの余白はリセットするが、要素の上下の設定はリセットされない
・一部のHTML5のタグに対応していない
Universal Selector ‘*’ Reset ・すべての余白をリセットするので、デフォルトの使いやすい余白もリセットしてしまう
・ブラウザ上での読み込み速度が下がる
Normalize.css ・デフォルトの有用な余白の設定のみを引き継ぎ他はリセット
・使い勝手が良い
★★
ress ・normalize.cssが使いやすくなるように改良されたもの ★★
sanitize.css ・有用なCSSのみを残し、デフォルトでそれなりにデザインが整っている
・手軽に使うことが出来る
★★★

 

たくさんあって、何をつかったらいいかわからないという方は上の表のオススメ度を参考にしてください。
(星が多いほどオススメ度が高いです。)

本記事で紹介した、リセットCSSの中で最もおすすめできるものは、

HTML5 Doctor CSS Resetとsanitize.cssの2つです。

HTML5 Doctor CSS Reset vs sanitize.css
  • HTML5 Doctor CSS Reset … 余白を全てリセットするので、全て自分で調整したい人向け
  • sanitize.cssデフォルトのブラウザの有用なCSSを保持しているので、全て自分でデザインしなくても済むので便利。少しラクをしたい人向け。

この表でおすすめどが低いものを使ってはいけないというわけではないので、自分の好みにあったリセットCSSを使って快適に開発をしましょう。
慣れてきたら自分好みのリセットCSSを書いてみるのも良いかもしれません