第2回。(1)で紹介したHTMLにCSSを適用していく。すこしずつADPで今使っているやつと違うが、大目に見てくだされ。
まず、IE3やNN4といったUAには読み込ませないようにしておく。ADPでは@media screenを使ってどちらもはじき飛ばしている。
次に、デフォルトのmargin, paddingを消す（ADP: ブラウザで見た目を調整するための最初のお約束を参照）。
* {
margin: 0;
padding: 0;
}bodyの背景画像で縦棒を引く。幅は100%。
body {
width: 100%;
background-color: white;
background-image: url(images/backbody.gif);
background-repeat: repeat-y;
color: #333322;
}縦棒を引いたところまでキャプチャ (480 by 200 pixels, 3.4KB)
h1要素は、幅を100%、高さをピクセルで固定し、背景画像で横棒を引く。この時点で、width, heightともに指定してしまったので、paddingは使えないことになる（ADP: IE6のwidth解釈バグ対処法を参照）。font-sizeの固定は、あとでこのテキストを隠すためだが、ピクセル固定がイヤならばsmallあたりでもいいと思う。
h1 {
position: relative;
width: 100%;
height: 113px;
background-image: url(images/backh1.gif);
line-height: 1;
font-size: 16px;
}横棒も引いたところまでキャプチャ (480 by 250 pixels, 3.2KB)
まだタイトル画像がなかったり、縦棒と横棒の継ぎ目が汚いが、そのままにしておく。
続くh2要素以下は、なにかしらのブロック要素で囲むことができない。正しくは、dlあたりで囲んでもいいんだけれどソースの見た目が悪い。つまり、h2以降が始まるポイントをposition: absoluteで指定する方法がとれない。
そこで、body直下に並びそうな本文で使うブロック要素（h3, p, dl, ul, pre, blockquoteなど）すべてに左右のmarginを指定する。左側のmarginは、メニューの分を考えて252pxにしている。
本当はbody > pのように子セレクタのみに指定すべきだが、IE6はそんなの知らないので、子孫セレクタでmarginを指定し、bodyの孫以降でmarginの指定をキャンセルしておくのがのぞましい。
これらブロック要素には横幅は指定しない。縦方向は、上（h1要素）から順々に並べているだけなので、positionを明示的に使う必要性はないわけだ。これで、divを使わなくても本文を並べることができる。ローテクとかいうな。
h2 {
margin: 32px 32px 16px 252px;
font-size: 100%;
color: #804024;
}
p {
margin: 0 32px 0 252px;
line-height: 1.5;
font-size: 90%;
}
body * p {
margin: 0;
font-size: 100%;
}本文を書いたところまででキャプチャ (480 by 290 pixels, 3.1KB)
あとはナビゲーション部分やフォームの部分をposition: absoluteで置けばできあがりである。ただ、そこでもいろいろやっているので、次回で説明する。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/309
いろいろ書き換え。うちのCSSは無駄な記述が多いなあ、と改めて思いました。