おすすめリセットCSS 5選 2019年版 【コピペで使える】


Webデザイン入門オンライン講座 Udemy

Web制作を自分で行い始めたとき、たとえば、h1、a、ul、liなどが、ブラウザごとの見え方が少しずつ違っていることに気づくと思います。

リセットcss(reset css)は、その違いをあらかじめリセットして、CSS制作を効率的にすることが目的です。

自分で設定するのもよいですが、「このタグはこういう設定にリセットしたらよいよ」っていう雛形を作っている人たちがいらっしゃいます。
そこで、人気のリセットCSSをご紹介します。

リセットcssのメリットとデメリット

メリット

  • ブラウザごとの表示の違いを、最小限に抑えることができる
  • ブラウザごとの差異を気にせず、自分がスタイルしたい必要な部分だけスタイルすれば良い

デメリット

  • CSSの分量が多くなる
  • リセットしっぱなしで、スタイルを当てていない要素がダサくなる

といった感じでしょうか。まぁ、CSSの分量が多いといってもたかが知れているとは思いますけど、結局同じ要素に別のスタイルを当てることがおおいので、二重になるケースが多くなるのは間違い無いですね。

人気、おすすめリセットCSS

Eric Meyer’s “Reset CSS” 2.0

http://cssreset.com/scripts/eric-meyer-reset-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;
}

これが、2018年現在も一番人気のようです。

HTML5 Doctor CSS Reset

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

公式サイト

/*
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に適したリセットCSSです。

Yahoo! (YUI 3) Reset CSS

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

公式サイト

/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://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!が提供してくれています。CDNもあるので、そこから読み込むのもアリですが、リセットCSSをわざわざ外部から読まなくてもよいかなー。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

Universal Selector ‘*’ Reset

これは単純に、

*{
margin:0;
padding:0;
}

と書いて、全ての要素(”*”)について、margin 0 とpadding 0 にリセットするというもの。

これ、当然、tableとかのpaddingとかもクリアしちゃうのがちょっとやりづらいかな。まぁ、別途指定すれば良いだけですが。

Normalize.css

https://necolas.github.io/normalize.css/

公式サイト

これは厳密に言うと、リセットCSSではないようです。

どういうことかというと、ブラウザのスタイルをリセットするというよりも、有用なデフォルトのスタイルを維持することを狙っているものです。
良いものを生かすということですね。

だいぶ長いので、GitHubをご確認ください。

初心者にオススメのCSS学習動画と本

CSSを基礎から学びたいという方は、オンライン動画学習サイト「Udemy」がおすすめです。

下記のプログラムがCSS初心者向けのプログラム。有料ではありますが、それだけの価値は十分にある内容になってます。私は最初、初心向けの動画をひたすら学びました。Udemyは一つ一つのコンテンツの質が半端ないので、1個がっつりやりきれば、かなりマスターできちゃいます。

CSS / CSS3 マスターコース |70以上のレッスン、7時間以上のレッスンでCSSを基礎からマスター

本でのオススメは、こちら。私もだいぶお世話になりました。
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

まとめ

スタイルを作っていく際は、やっぱりブラウザ依存の表示は邪魔になることが多くあります。
なので、リセットCSSは使った方が良いかな、と。
こちら側も、ブラウザ依存がないことを前提にスタイルを作れるので、思考の時間も短く、効率的です。

世界的な潮流としては、上記の5つを抑えれば十分だと思いますので、一度それぞれ試してみて、しっくりきたものを採用すれば良いと思います。

 

あわせて読みたい