[CSS]ブラウザのスタイルを初期化するスタイルシートの総まとめ -2010年版

ブラウザごとに異なるデフォルトのスタイルを初期化するスタイルシートの歴史を振り返りつつ、2010年の最新のCSS Resetまでのまとめを紹介します。

サイトのキャプチャ

A Comprehensive Guide to CSS Resets

[ad#ad-2]

ユニバーサルセレクタから始まったCSS Resetの進化の過程をたどり、最近リリースされたCSS Resetを紹介します。
下記は、各ポイントを意訳したものです。

(X)HTML

HTML5

[ad#ad-2]

"Hard" Reset

source:
Fight the Power Default

ユニバーサルセレクタを使用した最も古いCSS Resetです。現在ではこの書式を使用しているものは無いでしょう。

* {padding:0; margin:0;}
* {padding:0; margin:0; border: 0; outline: 0;}

undohtml.css -2010 version

source:
'undohtml.css' – Tantek Celik

2004年から開発が始まったCSS Resetの2010年版です。コメントには更新時のアイデアが記載されています。

/* undohtml.css */
/* (c) 2004-2010 Tantek Çelik. Some Rights Reserved. http://tantek.com */
/* This style sheet is licensed under a Creative Commons License.      */
/*             http://creativecommons.org/licenses/by/2.0              */

/* Purpose: undo some of the default styling of common browsers        */

/* link underlines tend to make hypertext less readable,
   because underlines obscure the shapes of the lower halves of words */
:link,:visited,ins { text-decoration:none }

/* no list-markers for nav lists, default markers work well for item lists */
nav ul,nav ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code/kbd too */
h1,h2,h3,h4,h5,h6,pre,code,kbd { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
dl,ul,ol,li,
h1,h2,h3,h4,h5,h6,
html,body,pre,p,blockquote,
form,fieldset,input,label
{ margin:0; padding:0 }

/* who thought blue linked image borders were a good idea? no abbr borders */
abbr, img, object,
a img,:link img,:visited img,
a object,:link object,:visited object
{ border:0 }

/* de-italicize address,abbr */
address,abbr { font-style:normal }

/* get rid of ad frames inserted by local wifi connections e.g. AnchorFree */
iframe:not(.auto-link) { display:none ! important; visibility:hidden ! important; margin-left: -10000px ! important  }

/* more varnish stripping as necessary... */

Poor Man's Reset

ユニバーサルセレクタの使用をやめ、html, bodyを代わりに使用した版です。ここから何のエレメントに対して指定するか、というのが始まりました。

html, body {padding: 0; margin: 0;}
html {font-size: 1em;}
body {font-size: 100%;}
a img, :link img, :visited img {border: 0;}

Siolon Reset

source:
CSS Browser Reset

ユニバーサルセレクタは含まれていますが、個別のエレメントの指定が形になってきたCSS Resetです。

* {vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; border: none; padding: 0; margin: 0;}
body {padding: 5px;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {margin: 20px 0;}
li, dd, blockquote {margin-left: 40px;}
table {border-collapse: collapse; border-spacing: 0;}

Inman Reset

Shaun Inmanが使用したCSS Resetです。Eric Meyer's CSS Resetに非常によく似たものとなっています。

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {padding: 0; margin: 0;}
table {border-collapse: collapse; border-spacing: 0;}
fieldset, img, abbr {border: 0;}
address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var {font-weight: normal; font-style: normal;}
ul {list-style: none;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-size: 1.0em;}
q:before, q:after {content: '';}
a, ins {text-decoration: none;}

Tripoli Reset

source:
Tripoli

適用する要素がだんだんと増えてきました。現在でも若干の開発者が使用しているCSS Resetです。

* {margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none;}
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext {font: inherit; font-size: 1em; white-space: normal;}
dfn, i, cite, var, address, em {font-style: normal;}
th, b, strong, h1, h2, h3, h4, h5, h6 {font-weight: normal;}
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table {border: none;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td, center {text-align: left; vertical-align: top;}
body {line-height: 1; background: white; color: black;}
q {quotes: "" "";}
ul, ol, dir, menu {list-style: none;}
sub, sup {vertical-align: baseline;}
a {color: inherit;}
hr {display: none;} /* we don't need a visual hr in layout */
font {color: inherit !important; font: inherit !important; color: inherit !important;} /* disables some nasty font attributes in standard browsers */
marquee {overflow: inherit !important; -moz-binding: none;}
blink {text-decoration: none;}
nobr {white-space: normal;}

Dan Schulz's Reset

source:
Dan Schulz

ユニバーサルセレクタから完全に卒業したCSS Resetです。特徴的なのは全ての要素からmargin, paddingを取り除くスタイルを適用していることです。

/* CSS RESET RULES */
html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

body {
    background: #FFF;
    color: #000;
    font: 85%/1.5 verdana, arial, helvetica, sans-serif;
}

code, pre {
    white-space: pre;
}

del {
    text-decoration: line-through;            /* it's deleted text - show it as such */
}

dfn {
    font-style: italic;
    font-weight: bold;
}

em {
    font-style: italic;
}

fieldset {
    border: 0;
    display: inline;
}

h1, h2, h3, h4, h5, h6 {
    font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
}

img {
    border: 0;
    vertical-align: bottom;
}

ins {
    text-decoration: none;
}

strong {
    font-weight: bold;
}

tt {
    display: block;
    margin: 0.5em 0;
    padding: 0.5em 1em;
}

.skip {
    position: absolute;
    left: -999em;
}

Thierry Koblentz's base.css

source:
Setting rather than Resetting Default Styling

2010年3月にリリースされたCSS Resetです。デフォルトの値を必ずしも「0」にする必要は無いという考えのもと、作成されています。

/*
 * base.css | v0.4 (06132010) | Thierry Koblentz
 *
 * The purpose of this styles sheet is to set default styles for common browsers and address common issues (missing scrollbar, extended buttons in IE, gap below images, etc.)
 *
 * See: http://thinkvitamin.com/design/setting-rather-than-resetting-default-styling/
 *
 * Changes in this version:
 *    - input, button, textarea, select, optgroup, option {line-height: 1.4 !important;} (to override FF's default styling)
 *    - styling <ol> inside <ul> (merci Goulven)
 */

/* using height:100% on html and body allows to style containers with a 100% height
 * the overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content
 * note that there is no font-size declaration set in this rule. If you wish to include one, you should use font-size: 100.01% to prevent bugs in IE and Opera
 */
html {
  height: 100%;
  overflow-y: scroll;
}
/* not all browsers set white as the default background color
 * color is set to create not too much contrast with the background color
 * line-height is to ensure that text is legible enough (that there is enough space between the upper and lower line)
 */	
body {
  height: 100%;
  background: #fff;
  color: #444;
  line-height: 1.4;
}

/* this choice of font-family is supposed to render text the same across platforms
 * letter-spacing makes the font a bit more legible
 */
body, input, button, textarea, select {
  font-family: "Palatino Linotype", Freeserif, serif;
  letter-spacing: .05em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "DejaVu Serif", serif;
  letter-spacing: .1em;
}
pre, tt, code, kbd, samp, var {
  font-family: "Courier New", Courier, monospace;
}

/* These should be self explanatory
 */
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}

h1, h2, h3, h4, h5 {font-weight: normal;}

/* styling for links and visited links as well as for links in a hovered, focus and active state
 * make sure to keep these rules in that order, with :active being last
 * text-decoration: none is to make the links more legible while they are in a hovered, focus or active state
 * a:focus and :focus are used to help keyboard users, you may change their styling, but make sure to give users a visual clue of the element's state.
 * outline:none used with the pseudo-class :hover is to avoid outline when a user clicks on links
 * note that these last rules do not do anything in IE as this browser does not support "outline"
 */
a:link {color: #000;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:focus {text-decoration: none;}
a:focus,:focus {outline: 1px dotted #000;}
a:hover,a:active {outline: none;}

/*
 * This one is commented out as it may be overkill (users who use both a mouse and the keyboard would lose keyboard focus)
 * Besides, this may create a performance issue
 * html:hover a {outline: none;}
 */

/* margin and padding values are reset for all these elements
 * you could remove from there elements you do not used in your documents, but I don't think it'd worth it
 */
body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {
  margin: 0;
  padding: 0;
}

/* this is to prevent border from showing around fieldsets and images (i.e., images inside anchors)
 */
fieldset, img {
  border: 0;
}

/* to prevent a gap from showing below images in some browsers
 */
img {vertical-align: bottom;}

/* Styling of list items
 * This styles sheet contains a class to apply on lists to reset list-type and margin on LIs
 */
ol li,
ul ol li {list-style-type: decimal;}
ul li {list-style-type: disc;}
ul ul li {list-style-type: circle;}
ul ul ul li {list-style-type: square;}
ol ol li {list-style-type: lower-alpha;}
ol ol ol li {list-style-type: lower-roman;}

/* These should be self explanatory
 * I believe *most* UAs style sub and sup like this by default so I am not sure there is value to include these rules here
 */
sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

/* color is to make that element stands out (see color set via body)
 * padding is used so Internet Explorer does not cut-off descenders in letters like p, g, etc.)
 */
legend {
  color: #000;
  padding-bottom: .5em;
}

/* according to Eric Meyer's reset: tables still need 'cellspacing="0"' in the markup
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* caption and summary are very important for tabular data but because caption is nearly impossible to style across browsers many authors do not use it or use display:none to "hide" it (which is almost the same as not using it).
 * so to prevent such workaround, I am positioning this element off-screen
 */
caption {
  position: absolute;
  left: -999em;
}

/* all th should be centered unless they are in tbody (table body)
 */
th {text-align: center;}
tbody th {text-align: left;} 

/* See Eric Meyer's article about Fixed Monospace Sizing
 * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
 */
code {color: #06f;}
code, pre {font-family: "Courier New", monospace, serif; font-size: 1em;}

/* This should be self explanatory
 */
blockquote, q, em, cite, dfn, i, cite, var, address {
  font-style: italic;
}

/* to prevent some browsers from inserting quotes on "q" and "p" ("p" in blockquotes)
 */
blockquote p:before, blockquote p:after, q:before, q:after {content: '';}

/* These should be self explanatory
 */
th, strong, dt, b {
  font-weight: bold;
}

ins {
  text-decoration: none;
  border-bottom: 3px double #333;
}

del {text-decoration: line-through;} 

abbr,
acronym {
  border-bottom: 1px dotted #333;
  font-variant: normal;
} 

/* Creating white space (vertical gutters) via padding
 * most authors do not set right/left padding or margin on these elements, they rather use an extra wrapper or style the container with padding to create the left and right gap/gutter they need
 * I find that the latter creates less robust layouts because it leads authors to mix padding with width which creates issue with the broken box model (IE5 or IE6 in quirks mode)
 * so imho, setting this style using the child combinator (i.e., div > h1) should be the best way to do it, but unfortunately IE 6 does not support such syntax, so I have to go with the following + a reset (see next rule)
 */
h1, h2, h3, h4, h5, h6, p, pre, ul, ol, dl, fieldset, address {padding:0 30px;}

/* this is to reset the left/right gaps (created by the previous and next rules) on nested elements
 */
dd p, dd pre, dd ul, dd ol, dd dl, li p, li pre, li ul, li ol, li dl, fieldset p, fieldset ul, fieldset ol {
  padding-right: 0;
  padding-left: 0;
}

/* These should be self explanatory
 */
dd {
  padding-left: 20px;
  margin-top: .5em;
}

li {margin-left:30px;}

/* we cannot use padding on a table to create left and right gaps (as we do with the elements above), instead we use margin
 */ 
table {
  margin-right: 30px;
  margin-left: 30px;
} 

/* we use margin for hr for the same reason we do for table
 */
hr {
  margin-right: 30px;
  margin-left: 30px;
  border-style: inset;
  border-width: 1px;
}

/* top margin solution */
/* this is my approach to create white space between elements, you do not have to adhere to it
 * rather than stylling these elements with top and bottom margin, or simply bottom margin I only use top margin
 */
h1, h2, h3, h4, h5, h6, p, pre, dt, li, hr, legend, input, button, textarea, select, address, table {margin-top: 1.2em;}

/* top padding solution */
/* this is a different approach which may be less frustrating for novice because it avoids running into collapsing margin and allows to clear floats while preserving space above the element
 * if you decide to give this a try, then comment out the above rule and uncomment the two next ones
 */
 /*
 h1, h2, h3, h4, h5, h6, p, pre, dt, dd, li, legend, address {padding-top: 1.2em;}
 hr, input, button, textarea, select, table {margin-top: 1.2em;}
 */

/* form elements
 * this should not affect the layout of the labels unless you style them in a way that padding applies
 * if I include this here it is mostly because when labels are styled with float and clear, top padding creates a gap between labels (bottom margin would, but not top margin)
 */
label {padding-top: 1.2em;}

/* line height helps to set the vertical alignment of radio buttons and check boxes (remember to group these in fieldsets)
 */
fieldset {line-height: 1;}

/* vertical alignment of checkboxes (a different value is served to IE 7)
 */
input[type="checkbox"] {
  vertical-align: bottom;
  *vertical-align: baseline;
}

/* vertical alignment of radio buttons
 */
input[type="radio"] {vertical-align: text-bottom;}

/* vertical alignment of input fields for IE 6
 */
input {_vertical-align: text-bottom;}

/* a specific font-size is set for these elements
 * the line-height is to override FF's default styling
 */
input, button, textarea, select, optgroup, option {
  font-size: .9em;
	line-height: 1.4 !important;
}

/* this is to fix IE 6 and 7 which create extra right/left padding on buttons
 * IMPORTANT: because IE 6 does not understand the first selector below, you need to apply the class "inputButton" to all input of type="button" in your documents
 * the first declaration is for IE 6 and 7, the second one for IE 6 only, the third one is for all browsers.
 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.inputButton {
  *overflow: visible;
  _width: 0;
  padding: .2em .4em;
}

/* classes
 * to style elements with the default padding and margin we set on headings, paragraphs, lists, etc.
 * for example, this class could be used on a DIV inside a blockquote or a DIV inside a FORM, etc.
 */
.block {
  padding: 0 30px;
  margin-top: 1.2em;
}

/* to swap padding for margin
 * for example, this class could be used on a heading you'd style with a bottom border
 */
.padding2margin {
  margin-right: 30px;
  margin-left: 30px;
  padding-right: 0;
  padding-left: 0;
}
/* list items are styled by default with markers (disc, etc.) and left margin
 * if you apply the class "noMarker" to a list, its items won't display markers and won't have left margin
 */
.noMarker li {
  list-style: none;
  margin-left: 0;
}

Simple Reset

source:
CSS Reset – a simpler option

2010年4月にリリースされたCSS Resetです。Simple Resetの名の通り、リセットされている要素は限定されたものとなっています。
基本的な考えは不要なmargin, padding, borderを取り除き、テーブル・リストなど最小限のリセットのみを適用しています。

/* ----------------------------
simple reset
---------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

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

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

input, textarea, select
{
	font-size: 110%;
	line-height: 1.1;
}

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

CSS Mini Reset

source:
CSS Mini Reset

2010年5月にリリースされたCSS Resetです。全ての要素がリセットされることを望まない用に開発されています。

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0;
}

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

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

Soft Reset

source:
Don't Reset – Soft Reset

2010年5月にリリースされたCSS Resetです。リセットする必要のあるもののみプロパティをリセットするという考えで作成されています。

/* Soft Reset */
body, div, dl, dt, dd, 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; }
h1, h2, h3, h4, h5, h6, address, caption { font-style:normal; font-size:100%; font-weight:normal; }
caption, th { text-align:left; }
ol.listreset, .listreset ol, ul.listreset, .listreset ul, .listreset li { margin:0; padding:0; list-style:none; }

Less is More Reset

source:
Less is more - my choice of Reset CSS

2007年6月にリリースされたCSS Resetです。「Less is More」の名の通り、最小限必要のあるもののみリセットを適用するようにしています。

body {
padding: 0;
margin: 0;
font: 13px Arial, Helvetica, Garuda, sans-serif;
*font-size: small;
*font: x-small;
}
h1, h2, h3, h4, h5, h6, ul, li, em, strong, pre, code {
padding: 0;
margin: 0;
line-height: 1em;
font-size: 100%;
font-weight: normal;
font-style: normal;
}
table {
font-size: inherit;
font: 100%;
}
ul {
list-style: none;
}
img {
border: 0;
}
p {
margin: 1em 0;
}

The Visibility:Inherit Reset

source:
My Initial CSS Settings

2009年8月にリリースされたCSS Resetです。コードは少ないですが、パワフルなリセットです。

/* -------------------- Resets --------------------- */
body, form, fieldset, ol, ul, li, h1, h2, h3, h4, h5, h6, p {
margin:0;
padding:0;
}
img {
border:0; /* kills Gecko bug when img's are placed inside links */
vertical-align:bottom; /* set vertical align to bottom for IE */
}

Homebrewed CSS Reset

source:
Create Your Own Simple Reset.css File

これは2008年8月にリリースされた、自分用のCSS Resetを作成するCSS Resetです。

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}  

body
{
line-height: 1;
font-size: 88% /* Decide for yourself if you want to include this. */;
}  

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}  

ul, ol
{
list-style: none;
}  

a
{
color: black;
text-decoration: none;
}  

a:hover
{
text-decoration: underline;
}  

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}  

.floatRight
{
float: rightright;
padding: .5em 0 .5em .5em;
}

Eric Meyer's CSS Reset (most current)

source:
CSS Tools: Reset CSS

Eric Meyer's CSS Resetの最新版です。

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;
}

/* 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;
}

HTML5Reset

source:
HTML5Reset

ここから、HTML5のResetです。
2010年9月にリリースされた、「Eric Meyer's CSS Reset」をベースにしたHTML5用のCSS Resetです。

/*
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;
}

CSS Reset – Refreshed

source:
CSS Reset - Refreshed

2010年2月にリリースされたHTML5用のCSS Resetです。「Eric Meyer's CSS Reset」をリフレッシュしたものです。

/* v1.2 | 20100218 */

/* Eric Meyer's original CSS Reset is found at
   http://meyerweb.com/eric/tools/css/reset/ */

/* This version's permalink is
   http://kingdesk.com/articles/css-reset/ */

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,
section, article, aside, hgroup, header,
footer, nav, dialog, figure, menu,
video, audio, mark, time, canvas, details {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	}
section, article, aside, hgroup, header,
footer, nav, dialog, figure, figcaption {
	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;
	}
:focus { /* remember to define focus styles! */
	outline: 0;
	}
ins { /* remember to highlight inserts somehow! */
	text-decoration: none;
	}
del {
	text-decoration: line-through;
	}
table { /* markup tables with 'cellspacing="0"' */
	border-collapse: collapse;
	border-spacing: 0;
	}

HTML5 Boilerplate

source:
HTML5 Boilerplate

2009年4月にリリースされたHTML5用のCSS Resetです。「Eric Meyer's CSS Reset」と「HTML5Reset」を合わせたようなCSS Resetになっています。

/*
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

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;
}                  

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; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

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; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

/* END RESET CSS */

sponsors

top of page

©2024 coliss