[CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集

YUI、Blueprint、YAMLなどのCSSのフレームワークでも利用されているブラウザのスタイルを初期化するスタイルシートのサンプル集です。

• Blueprint
• YAML
• YUI
• Tripoli
• meyerweb
• warpspire
• christianmontoya
• crucialwebhost

下記のスタイルシートは、記述スタイルを同様のスタイルに全て変更しています。また、コメントも削除しています。

Blueprint

Blueprint
Based:Reset Reloaded

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
	margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;
}
body{
	line-height:1.5; background:#fff; margin:1.5em 0;
}
table{
	border-collapse:separate; border-spacing:0;
}
caption, th, td{
	text-align:left; font-weight:400;
}
blockquote:before, blockquote:after, q:before, q:after{
	content:"";
}
blockquote, q{
	quotes:"" "";
}
a img{
	border:none;
}

YAML

YAML(Yet Another Multicolumn Layout)

*{
	margin:0; padding:0;
}
option{
	padding-left:0.4em;
}
* html body *{
	overflow:visible;
}
* html iframe,* html frame{
	overflow:auto;
}
* html frameset{
	overflow:hidden;
}
html{
	height:100%;
}
body{
	min-height:101%; font-size:100.01%; color:#000; background:#fff; text-align:left;
}
fieldset, img{
	border:0 solid;
}
ul, ol, dl{
	margin:0 0 1em 1em;
}
li{
	margin-left:1.5em; line-height:1.5em;
}
dt{
	font-weight:700;
}
dd{
	margin:0 0 1em 2em;
}
blockquote, cite{
	font-size:0.93em;width:auto;margin:0 0 1em 1.5em;
}

YUI

YUI Reset CSS

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, 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;
}

Tripoli

Tripoli

*{
	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;
}
font{
	color:inherit !important; font:inherit !important; color:inherit !important;
}
marquee{
	overflow:inherit !important; -moz-binding:none;
}
blink{
	text-decoration:none;
}
nobr{
	white-space:normal;
}

meyerweb

Reset Reloaded

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

:focus{
	outline:0;
}

ins{
	text-decoration:none;
}
del{
	text-decoration:line-through;
}

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

warpspire

Why I don’t use CSS Frameworks

*{
	padding:0; margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address{
	margin:1em 0;
}
li, dd{
	margin-left:5%;
}
fieldset{
	padding:.5em;
}
select option{
	padding:0 5px;
}
.hide, .print-logo, .close-button{
	display:none;
}
.left{
	float:left;
}
.right{
	float:right;
}
.clear{
	clear:both; height:1px; font-size:1px; line-height:1px;
}
a img{
	border:none;
}

christianmontoya

CSS techniques I use all the time

html, body, form, fieldset{
	margin:0; padding:0;font:100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,blockquote, ul, ol, dl, address{
	margin:1em 0; padding:0;
}
li, dd, blockquote{
	margin-left:1em;
}
form label{
	cursor:pointer;
}
fieldset{
	border:none;
}
input, select, textarea{
	font-size:100%; font-family:inherit;
}

crucialwebhost

Master Stylesheet: The Most Useful CSS Technique

html, body{
	border:0; margin:0; padding:0;
}
body{
	font:100%/1.25 arial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6{
	margin:0; padding:0; font-weight:normal;
}
h1{
	padding:30px 0 25px 0; letter-spacing:-1px; font:2em arial, helvetica, sans-serif;
}
h2{
	padding:20px 0; letter-spacing:-1px; font:1.5em arial, helvetica, sans-serif;
}
h3{
	font:1em arial, helvetica, sans-serif; font-weight:bold;
}
p, ul, ol{
	margin:0; padding:0 0 18px 0;
}
ul, ol{
	list-style:none; padding:0 0 18px 40px;
}
blockquote{
	margin:22px 40px; padding:0;
}
small{
	font-size:0.85em;
}
img{
	border:0;
}
sup{
	position:relative; bottom:0.3em; vertical-align:baseline;
}
sub{
	position:relative; bottom:-0.2em; vertical-align:baseline;
}
acronym, abbr{
	cursor:help; letter-spacing:1px; border-bottom:1px dashed;
}

via:CSS Frameworks + CSS Reset: Design From Scratch

Post on:2007年9月22日