reset.css ~梅雨の陣~

| | | | | |

2010/06/03

スタイルのリセット関連をかなりてきとうにやっていたので、まじめに考えてみようと思い、まじめにreset.css用意することにしました。
参考にしたのとかまとめー。

(画像は、ほぼジャケ買いのチロルチョコ白熊です。い、入れ物がかわいいじゃねーか!)
(というどうでもいい話。)

* {
	margin				: 0;
	padding				: 0;
}

今まで、全称セレクタ(*)でmarginとpaddinを0にするというかなり乱暴な感じでリセットしていたので、これはそろそろまじめに考えにゃいかん、と。
勇気を持って公開してみますが、まだまだ改善の余地はあるかなぁ。

  1. 参考にさせていただいたページ
  2. デモ
  3. コード
  4. ダウンロード

参考にさせていただいたページ

デモ

demo

コード

@charset "Shift_JIS";

/*----------------------------------------------------------------
 ResetCSS
 -----------------------------------------------------------------

 c/p
 @import url(./reset.css);
----------------------------------------------------------------*/
html {
	overflow-y			: scroll;
}

html, body,
div,
h1, h2, h3, h4, h5, h6,
p, pre, blockquote,
ul, ol, li, dl, dt, dd,
ins, del, address, hr,
form, fieldset, legend,
table, caption, thead, tfoot, tbody, tr, th, td {
	padding				: 0;
	margin				: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
}

/* table
---------------------------------------------------- */
table{
	border-collapse		: collapse;
	border-spacing		: 0;
}
caption, th{
	text-align			: left;
}
td,th{
	font-size			: inherit;
	font-family			: inherit;
	font-style			: inherit;
}

/* heading
---------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
}

/* block elements
---------------------------------------------------- */
pre {
	white-space			: pre-wrap;
	word-wrap			: break-word;
}

/* inline elements
---------------------------------------------------- */
img, object {
	border				: 0;
	vertical-align		: bottom;
}
sub {
	line-height			: 1;
	vertical-align		: text-bottom;
}
sup {
	line-height			: 1;
	vertical-align		: text-top;
}
q:before, q:after {
	content				: "";
}

/* form parts
---------------------------------------------------- */
fieldset {
	border: 0;
}
input, button, select, optgroup, option, textarea {
	background			: inherit;
	color				: inherit;
	font-family			: inherit;
	font-style			: inherit;
	font-variant		: normal;
	font-weight			: inherit;
	font-size			: 1em;
	letter-spacing		: normal;
	word-spacing		: normal;
	text-transform		: none;
}

terkel.jpさんのをかなり参考にして、自分なりに、いろいろつけたしたり消したりしてみたかんじかもしれない。

見出しとかの文字サイズはあえてそのままにしてます。デフォルトのままにしておかないと、組んでる最中によくわからなくなってきちゃったのであえて残してみた。
同じような意味でthとかもスタイル残してます。

ダウンロード

DOWNLOAD

reset.cssのみです。
一番さいしょにimportしてお使いくださいませ。


トラックバックURL

よろしければコメントをどうぞ。

コメント・トラックバックは承認制です。

必ず入力してください。

必ず入力してください。公開されません。

サイトやブログがありましたらどうぞ。