css

最終更新

 2009年 2月 27日

Home Web制作 CSS リセットCSSまとめ

リセットCSSまとめ

PDF 印刷 Eメール
ユーザの評価: / 2
悪い良い 
Web制作 - CSS
作者 管理人   
2008年11月25日(火曜日) 09:31

ブラウザスタイルのリセットCSSの紹介と配布等をしているサイトのまとめです。現在リセットCSSについては国内外問わず様々な議論がなされており、現在ではその必要性さえも問われているようです。

リセットCSSについて

HTMLの各タグは、ブラウザごとに初期スタイルが異なり、スタイルシートでレイアウトを行う際、ブラウザごとに異なる指定を行わないと期待通りのレイアウトを再現しない場合があります。
そのため、同一のスタイル指定で意図したレイアウトが再現できるように、このブラウザごとのスタイルの差異を無くすスタイルシートの設定を行います。コリス

リセットCSSを使用する前に

一見便利そうなリセットCSSですが、必要かどうかは良く考えてから使用したほうが良いようです。また海外ではあまり使われていないなんて事例も。

全称セレクタを使用したリセット

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

Ateneu Popular 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, 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-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
:focus{outline:0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table{border-collapse:separate; border-spacing:0;}
th, td {text-align:left; font-weight:normal;}
img, iframe {border:none; text-decoration:none;}
ol, ul{list-style:none;}
input, textarea, select, button {font-size:100%; font-family:inherit;}
select{margin:inherit;}
hr{margin:0; padding:0; border:0; color:#000; background-color:#000; height:1px}

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

Eric Meyer Reset CSS

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend{
	vertical-align:baseline;
	font-family:inherit;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	outline:0;
	padding:0;
	margin:0;
	border:0;
}
:focus{
	outline:0;
}
body{
	background:white;
	line-height:1;
	color:black;
}
ol, ul{
	list-style:none;
}
table{
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td{
	font-weight:normal;
	text-align:left;
}
blockquote:bfore, blockquote:after, q:before, q:after{
	content: "";
}
blockquote, q{
	quotes:"" "";
}

Tantek Celik Reset CSS

:link, :visited{text-decoration:none;}
ul, ol{list-style:none;}
h1, h2, h3, h4, h5, h6, pre, code{font-size:1em;}
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input
{margin:0; padding:0;}
a img, :link img, :visited img{border:none;}
address{font-style:normal;}

Christian Montoya Reset CSS

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

Rudeworks Reset CSS

*{
	margin:0;
	padding:0;
	border:none;
}
html{
	font:62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
	text-shadow:#000 0px 0px 0px;
}
ul{
	list-style:none;
	list-style-type:none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address{
	font-weight:normal;
	margin:0 0 1em 0;
}
cite, em, dfn{
	font-style:italic;
}
sup{
	position relative;
	bottom:0.3em;
	vertical-align:baseline;
}
sub{
	position:relative;
	bottom:-0.2em;
	vertical-align:baseline;
}
li, dd, blockquote{
	margin-left:1em;
}
code, kbd, samp, pre, tt, var, input[type=‘text’], textarea{
	font-size:100%;
	font-family:monaco, "Lucida Console", courier, mono-space;
}
del{
	text-decoration:line-through;
}
ins, dfn{
	border-bottom:1px solid #ccc;
}
small, sup, sub{
	font-size:85%;
}
abbr, acronym{
	text-transform:uppercase;
	font-size:85%;
	letter-spacing:.1em;
	border-bottom-style:dotted;
	border-bottom-width:1px;
}
a abbr, a acronym{
	border:none;
}
sup{
	vertical-align:super;
}
sub{
	vertical-align:sub;
}
h1{
	font-size:2em;
}
h2{
	font-size:1.8em;
}
h3{
	font-size:1.6em;
}
h4{
	font-size:1.4em;
}
h5{
	font-size:1.2em;
}
h6{
	font-size:1em;
}
a, a:link, a:visited, a:hover, a:active{
	outline:0;
	text-decoration:none;
}
a img{
	border:none;
	text-decoration:none;
}
img{
	border:none;
	text-decoration:none;
}
label, button{
	cursor:pointer;
}
input:focus, select:focus, textarea:focus{
	background-color:#FFF;
}
fieldset{
	border:none;
}
.clear{
	clear:both;
}
.float-left{
	float:left;
}
.float-right{
	float:right;
}
body{
	text-align:center;
}
#wrapper{
	margin:0 auto;
	text-align:left;
}

Anieto2K Reset CSS

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, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:normal;
	font-style:normal;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline
}
body{
	line-height:1
}
:focus{
	outline:0
}
ol, ul{
	list-style:none
}
table{
	border-collapse:collapse;
	border-spacing:0
}
blockquote:before, blockquote:after, q:before, q:after{
	content:""
}
blockquote, q{
	quotes:"" ""
}
input, textarea{
	margin:0;
	padding:0
}
hr{
	margin:0;
	padding:0;
	border:0;
	color:#000;
	background-color:#000;
	height:1px
}

CSSLab 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, 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-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}
:focus{
	outline:0;
}
table{
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td{
	text-align:left;
	font-weight:normal;
}
a img, iframe{
	border:none;
}
ol, ul{
	list-style:none;
}
input, textarea, select, button{
	font-size:100%;
	font-family:inherit;
}
select{
	margin:inherit;
}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol{margin-left:2em;}
/* == clearfix == */
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}


参考にさせて頂いたサイト

CSS | Eric Meyer | resetcss | yui | サイト | リセットCSS | 参考 | 紹介 | 配布

最終更新 ( 2008年12月03日(水曜日) 16:56 )
 
Home Web制作 CSS リセットCSSまとめ