第3回。(1), (2)で、だいたいおおまかなレイアウトはできた。あとは画像の配置をする。
モダンブラウザでは、画面左上にマンボウの絵とADPのタイトルロゴが画像で表示される。当然、やり方は、ブロック要素をposition: absoluteで配置し、その背景画像を使うことになる。
ADPの実際のやり方では、画像を横棒の上側
上側画像 (411 by 105 pixels, 7.8KB)
と下側
下側画像 (249 by 208 pixels, 8.8KB)
にわけ、それぞれ#searchbox（form要素）と#contents（ul要素）の背景画像として貼り付けている。
これがなぜ1枚ではダメか、が今回のポイントである。
理由。1枚絵で貼ってしまうと、本文にボックスの一部がかかってしまい、UAによってはかかった本文内のリンク、このエントリで言えば、(1)や(2)の部分のリンクが効かなくなってしまうからだ。これは透過GIFを使えば回避できるというものではない。つまり、position: absoluteで置くブロック要素はデザイン的にボックスが本文にかからないようにしないとならない。そこで、画像を分割するわけだ。
下側は#contentsの背景画像でいいとして、問題は上側。どの要素を使うか。h2要素も候補となるが、h2のテキストの長さは可変であるし、paddingとwidth/heightを同時指定できないので、うまくいかない。
よって、検索用のformをロゴの横に配置することにし、formにheightを指定し背景画像として上側画像をおく。formの部品はなにかしらブロック要素で囲む必要があるので、部品をpで囲むついでにmarginを設定する。ここでも、width/heightとpaddingを同時に指定しないという鉄則を守っていることに留意されたい。
#searchbox {
position: absolute;
left: 0;
top: 0;
height: 105px;
background-image: url(images/backform.gif);
background-repeat: no-repeat;
}
#searchbox p {
margin-left: 435px;
margin-top: 48px;
}このように、テキストの上に画像を貼れば、利用者が画像を表示しない設定にしていてもテキストとして読めることになる。ここらへんはADP: 背景画像でタイトルを参照のこと。
上側画像を貼ってキャプチャ (600 by 270 pixels, 12.1KB)
長いので次回へ。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/310
