HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。
目次
リセットCSS とは？
各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれています。ブラウザのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザ間の表示差異(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始めるためのものです。
リセットCSS のメリットとデメリット
メリット
- ブラウザ間の表示の違いを効率良く最小限に抑えることができる
- ブラウザ間の差異を気にせずに各要素の必要な部分だけスタイルできる
デメリット
- CSSの量が多くなってしまう
- リセットしたスタイルの再設定を忘れる可能性がある
- リセットしても結局再定義している場合が多いので無駄な記述が含まれる
リセットCSSの手法
全称セレクタによるリセット
* {
margin: 0;
padding: 0;
}
一昔前によく行われていたやり方で、全称セレクタ（ユニバーサルセレクタ）を使って、あらゆる要素を一括でリセットする方法ですね。 コードも短くて簡潔なように見えますが、デフォルトスタイルのいい部分も全てリセットしてしまうため、全て自分で設定しなおさなければならず、全ての要素 にスタイルを適用するため、レンダリング速度にも影響が出る可能性があります。(レンダリング速度が遅くなると、SEO の観点から見てもあまりよくないですね。自分も昔はこういう書き方をしていましたが。)
Yahoo! CSS Reset(YUI 3)
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}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}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}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
Yahoo! User Interface Library の reset.css を使った方法となります。Yahoo UI は BSD License のため、ライセンス表記を消さなければ改変したり商用利用したりするのも可能です。下記のリンクを読み込んでも使用できます。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
ただ、注意しなければいけない箇所もあるようで、html 要素に background-img や background-color を指定した場合に body 要素の背景が描画エリア一杯に表示されなくなるという問題があるようです。
html {
color: #000;
background: #FFF;
}
それは上記のコードによるもののようですが、以下のコードで解決できるようです。
(reset.css より後に読み込まれるCSSファイル内で、以下のコードを入れておくと解決できます。)
html {
background-color: transparent;
background-image: none;
}
Eric Meyer’s CSS Reset
/*
Eric Meyer's CSS Reset
http://meyerweb.com/eric/tools/css/reset/
v1.0 | 20080212
CSSresetr.com
*/
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing=0' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Eric Meyer 氏による CSS リセットの方法です。XHTML用のリセットCSS として提唱されたものです。彼が自身のブログで提起した reset.css は様々な論議を呼び、その後のリセットCSS に大きな影響を与えました。HTML で定義されているほとんどの要素に対してリセットをかけているのが特徴的です。h要素や strong要素の太字設定など、ある程度ブラウザの初期設定で使い勝手の良いものについてはそのまま利用するようになっており、カスタマイズもしやすくなっています。
なお、日本語圏ではほとんど使われない要素（abbr,acronym,em等）や、HTML5の非推奨要素（big,font等）に対して指定がされていたりしていて、 トラフィック的にも、処理的にも損をしてしまう可能性があるため、使用されるサイトにより不要な部分は削除するといいと思われます。
/* 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;
}
上記、v2.0 で HTML 2.0 にも対応されましたので、通常はこちらを使うといいかと思います。
HTML5 Doctor 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リセットで、基本的には Eric Meyer’s CSS Reset と似てはいますが、より HTML5 に特化して作られているため。HTML5 を主に使用する今後はこちらを使ってもいいのかなとは思います。
normalize.css
normalize.css はブラウザの有用なデフォルトのスタイルをそのまま維持するように設計されています。HTML5 にも IE6 にも対応した、ブラウザごとに異なる各要素のスタイルをリセットするスタイルシートです。有用なデフォルトはそのまま、スタイルの正常化、バグの修正、・ユーザビリティの改善、コードの説明などが盛り込まれているのが特徴となります。若干、ベンダープレフィックスが多様されているため、ブラウザシェアの移り変わりにより都度調整しなければいけない部分はあります。
以下より、ダウンロードできます。
Normalize.css
リセットCSSの人気度
以下のサイトから、リセットCSSの人気度(どのぐらいダウンロードされているか)が確認できます。
CSS Reset
2017年6月3日時点だと以下のようになっています。
