zz log

zaininnari Blog

モダンなCSS 最低限のHTML

css

方針

XHTML(htmlは文書構造、The W3C Markup Validation Serviceを通る程度)
CSSはValidを目指す(W3C CSS 検証サービスを通る程度、class名の意味論・記号論までは考慮しない[clearfixとか])
CSSは静的な装飾効果を持たせる(マウスオーバーでの画像置換は、javascriptで)

[html]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link href="./css/base.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="header">header</div>
  <!--end of id="header"-->
  <div id="container">
    <div id="sidebar">sidebar</div>
    <!--end of id="sidebar"-->
    <div id="content">content</div>
    <!--end of id="content"-->
  </div>
  <!--end of id="container"-->
  <div id="footer">footer</div>
  <!--end of id="footer"-->
</div>
<!--end of id="wrapper"-->
</body>
</html>

[/css/base.css]

@charset "UTF-8";
/********************************

****** reset ******
reference

YUI Reset CSS
@copyright: (c) 2008, Yahoo! Inc. All rights reserved.
@license:http://developer.yahoo.com/yui/license.html
********************************/

body {
	font-size: 62.5%; /* IE */
	line-height: 1.4;
}
html>/**/body {
	font-size: 10px;
}

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