現在はHTML/CSSでコーディングするのが当たり前な時代ですが
各ブラウザごとにその仕様が違ったりしますよね。
その際、意図したデザインで楽にコーディングする為に
ある程度その仕様を同じにしようじゃないかと用いられるのが
cssリセットファイルです。

代表的なリセットファイルは
・EricMeyer
・YUI3
って所でしょうか。

個々に用途は違うと思いますが（社内やチームによっても違ってきますよね）
・用意されたリセットファイルを使用する。
・自身でやりやすい様に予めリセットファイルを作成しそれを流用していく。
自分は当初YUI3を使用し、使いやすい様にカスタムしました。

EricMeyer

<br />
/* v2.0 | 20110126</p>
<p>http://meyerweb.com/eric/tools/css/reset/</p>
<p>License: none (public domain)</p>
<p>*/<br />
html, body, div, span, applet, object, iframe,<br />
h1, h2, h3, h4, h5, h6, p, blockquote, pre,<br />
a, abbr, acronym, address, big, cite, code,<br />
del, dfn, em, img, ins, kbd, q, s, samp,<br />
small, strike, strong, sub, sup, tt, var,<br />
b, u, i, center,<br />
dl, dt, dd, ol, ul, li,<br />
fieldset, form, label, legend,<br />
table, caption, tbody, tfoot, thead, tr, th, td,<br />
article, aside, canvas, details, embed,<br />
figure, figcaption, footer, header, hgroup,<br />
menu, nav, output, ruby, section, summary,<br />
time, mark, audio, video {<br />
	margin: 0;<br />
	padding: 0;<br />
	border: 0;<br />
	font-size: 100%;<br />
	font: inherit;<br />
	vertical-align: baseline;<br />
}<br />
/* HTML5 display-role reset for older browsers */<br />
article, aside, details, figcaption, figure,<br />
footer, header, hgroup, menu, nav, section {<br />
	display: block;<br />
}<br />
body {<br />
	line-height: 1;<br />
}<br />
ol, ul {<br />
	list-style: none;<br />
}<br />
blockquote, q {<br />
	quotes: none;<br />
}<br />
blockquote:before, blockquote:after,<br />
q:before, q:after {<br />
	content: '';<br />
	content: none;<br />
}<br />
table {<br />
	border-collapse: collapse;<br />
	border-spacing: 0;<br />
}<br />

YUI3

<br />
/* Yahoo! CSS Reset (YUI 3)</p>
<p>http://developer.yahoo.com/yui/license.html</p>
<p>version: 3.2.0<br />
*/<br />
html{<br />
	color:#000;<br />
	background:#FFF;<br />
}<br />
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 {<br />
	margin:0;<br />
	padding:0;<br />
}<br />
table {<br />
	border-collapse:collapse;<br />
	border-spacing:0;<br />
}<br />
fieldset, img {<br />
	border:0;<br />
}<br />
address, caption, cite, code, dfn, em, strong, th, var {<br />
	font-style:normal;<br />
	font-weight:normal;<br />
}<br />
li {<br />
	list-style:none;<br />
}<br />
caption, th {<br />
	text-align:left;<br />
}<br />
h1, h2, h3, h4, h5, h6 {<br />
	font-size:100%;<br />
	font-weight:normal;<br />
}<br />
q:before, q:after {<br />
	content:'';<br />
}<br />
abbr, acronym {<br />
	border:0;<br />
	font-variant:normal;<br />
}<br />
sup {<br />
	vertical-align:text-top;<br />
}<br />
sub {<br />
	vertical-align:text-bottom;<br />
}<br />
input, textarea, select {<br />
	font-family:inherit;<br />
	font-size:inherit;<br />
	font-weight:inherit;<br />
}<br />
input, textarea, select {<br />
	*font-size:100%;<br />
}<br />
legend {<br />
	color:#000;<br />
}<br />

もちろん使い勝手が悪かったりしたのでカスタムした訳ですが
IE6のシェアが低下してきた今
ガチガチのリセットファイルは必要か？と思いました。

cssファイルは@importする数が多ければそれだけ読み込みに時間がかかります。
なるべくlinkやimportを避け、必要最低限に抑える事が必要かと思います。

ならリセットファイルそのまま書いてしまえとなりそうですが
見にくそうなcssになりそうですよね。

これからは必要な箇所だけをリセットし
個々のサイトにあったコーディングをするのが一番良いのかなとも思っています。

おまけ

HTML5のリセット

<br />
/*<br />
html5doctor.com Reset Stylesheet v1.6.1<br />
Last Updated: 2010-09-17<br />
Author: Richard Clark - http://richclarkdesign.com<br />
*/<br />
html, body, div, span, object, iframe,<br />
h1, h2, h3, h4, h5, h6, p, blockquote, pre,<br />
abbr, address, cite, code,<br />
del, dfn, em, img, ins, kbd, q, samp,<br />
small, strong, sub, sup, var,<br />
b, i,<br />
dl, dt, dd, ol, ul, li,<br />
fieldset, form, label, legend,<br />
table, caption, tbody, tfoot, thead, tr, th, td,<br />
article, aside, canvas, details, figcaption, figure,<br />
footer, header, hgroup, menu, nav, section, summary,<br />
time, mark, audio, video {<br />
    margin:0;<br />
    padding:0;<br />
    border:0;<br />
    outline:0;<br />
    font-size:100%;<br />
    vertical-align:baseline;<br />
    background:transparent;<br />
}<br />
body {<br />
    line-height:1;<br />
}<br />
article,aside,details,figcaption,figure,<br />
footer,header,hgroup,menu,nav,section {<br />
    display:block;<br />
}<br />
nav ul {<br />
    list-style:none;<br />
}<br />
blockquote, q {<br />
    quotes:none;<br />
}<br />
blockquote:before, blockquote:after,<br />
q:before, q:after {<br />
    content:'';<br />
    content:none;<br />
}<br />
a {<br />
    margin:0;<br />
    padding:0;<br />
    font-size:100%;<br />
    vertical-align:baseline;<br />
    background:transparent;<br />
}<br />
/* change colours to suit your needs */<br />
ins {<br />
    background-color:#ff9;<br />
    color:#000;<br />
    text-decoration:none;<br />
}<br />
/* change colours to suit your needs */<br />
mark {<br />
    background-color:#ff9;<br />
    color:#000;<br />
    font-style:italic;<br />
    font-weight:bold;<br />
}<br />
del {<br />
    text-decoration: line-through;<br />
}<br />
abbr[title], dfn[title] {<br />
    border-bottom:1px dotted;<br />
    cursor:help;<br />
}<br />
table {<br />
    border-collapse:collapse;<br />
    border-spacing:0;<br />
}<br />
/* change border colour to suit your needs */<br />
hr {<br />
    display:block;<br />
    height:1px;<br />
    border:0;<br />
    border-top:1px solid #cccccc;<br />
    margin:1em 0;<br />
    padding:0;<br />
}<br />
input, select {<br />
    vertical-align:middle;<br />
}<br />

さてどうしましょうかね〜。

まずこんなエントリ書く前に
グチャグチャな自分のcss整理しなきゃ…。

Tweet

Share on Tumblr

[`evernote` not found]