私が、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; }
