「xhtml+css」個人的ポリシー

私が、webデザインをする際に心掛けている事を随時更新していきます。

web標準化・適正化
1. xhtml、css共にW3C及びWAIの文法チェックで減点されない事
2. バグを利用(cssハック等)をしない事
3. 1行目でxml宣言を行う事(ie6後方互換バグを見越した構築)
4. <link rev=”made” href=”mailto:~” />だけはルールに背いて指定しない事

ユニバーサルデザイン
1. alt=”” title=”” summary=””など要素の説明を指定する事
2. フォントサイズや文字間、行間の指定は、%やemなど相対指定を使う事
3. IE6以降のブラウザでほぼ等しく表示される事

3-1.floatした要素はdisplay: inline;を指定するか入れ子の構造にする

3-2.フォントサイズより小さい高さの要素には以下を付与
font-size: 0;または、overflow: hidden;

3-3.borderは使用せずに背景に指定する
background: url(“dotted.gif”) bottom repeat-x;

3-4.floatの使用後は以下でリセット

<div class="clear"><hr class="hide" /></div>

■my xhtml template

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>HPタイトル</title>
	<meta name="robots" content="INDEX, FOLLOW" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<link href="xxxx.css" rel="stylesheet" type="text/css" />
	<link rel="start" href="http://xxxx/" />
	<link rel="shortcut icon" href="http://xxxx/favicon.ico" />
	<script src="xxxx.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

■my css template

/*--------------------------------------
◆リセットCSS
--------------------------------------*/
* {
	font-size: 100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p {
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}
ul,dl,ol {
	text-indent: 0;
}
ul,ol {
	list-style: none;
}
img {
	border: 0 none;
	display: block;
}
a {
	outline: none;
}
/*--------------------------------------
◆デコレーションパレット
--------------------------------------*/
.text9 { font-size: 69%; }
.text10 { font-size: 77%; }
.text11 { font-size: 85%; }
.text12 { font-size: 93%; }
.text13 { font-size: 100%; }
.text14 { font-size: 108%; }
.text15 { font-size: 116%; }
.text16 { font-size: 123.1%; }
.text17 { font-size: 131%; }
.text18 { font-size: 138.5%; }
.text19 { font-size: 146.5%; }
.text20 { font-size: 153.9%; }
.bold { font-weight: bold; }
.red { color: #f00; }
.hide { display: none; }
.clear { clear: both; }
.f_right { float: right; }
.f_left { float: left; }
.hvspace10 { margin: 10px; }
.hvspace20 { margin: 20px; }

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WP-SpamFree by Pole Position Marketing