Twitter

html5のリセットCSS(+α)

2012/02/06 | html5 | コメント (0)

前回のエントリー「iPhone向けサイトのリセットCSS(暫定版)」に引き続き、html5コーディング用のリセットCSSとよく使う項目をフォーマット化した自分用メモ。

基本的な要素は入っているので僕の場合はほとんどこれで十分なのですが、必要な要素・プロパティのみをリセットする方法なので、足りないものは追加が必要です。

commonコメント以下にはfont-familyなどベースとなるbodyの指定と、よく使うのでclearfixを追加してます。ここら辺は自分がよく使うものを指定してコーディングの際の雛形にするとよいと思います。

@charset "utf-8";

/* =================================================
 * reset
 * ================================================*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img,
dl, dt, dd, ol, ul, li, form, label, table, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	margin: 0px;
	padding: 0px;
	border: 0px;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	outline: none;
}

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

ul, ol {
	list-style: none;
}

table {
	border-spacing: 0px;
	empty-cells: show;
}

/* =================================================
 * common
 * ================================================*/

body {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
	font-size: 12px;
	line-height: 160%;
	color: #333333;
	background-color: #FFFFFF;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

0 Comments»

コメントはまだありません。

このコメント欄の RSS フィード TrackBack URI

コメントをどうぞ »

初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top