まともそうなHTMLでfloatレイアウトをする。
(1)では、body要素の横幅を固定するためにIE6を標準準拠モードにしなければならなかった。では、body要素の横幅を固定しなければ、つまり、レイアウト自体を横幅固定にしなければ、IE6の後方互換モードでもうまくやることができるんじゃないか。
できあがりサンプル参照。今回のはさらに、メニューに「本文へスキップ」のリンクをつくり、2段組ではそのリンクが隠れ、1段組ではリンクが現れるようにしている。てきとーにウインドウの横幅を狭くしたり広くしたりしてみてくらはい。
以下解説。
HTML部は
<h1></h1>
<ul id="navigation">
<li><a href="#main">本文へスキップ</a></li>
<li>めにゅー</li>
</ul>
<div class="section" id="main">
<h2></h2>
<p></p>
</div>
<address></address>になっている。h2でなく、divにidをふったのは、ページ内リンクがIE6ではうまくいかなかったため。それ以外は、おおむねまともそうだと思う。
横幅は、メニューを20%、本文を80%、それで、メニューのmin-widthを155ピクセルにしている。この155という数字は、適当に決めたものではない。現在のよくある幅固定のレイアウトが780ピクセル前後なので、それが入るウインドウサイズでは2段組になるようにしている。具体的には、780*0.2=156になることを利用している。なので、比較的狭いウインドウ幅では1段組、広いウインドウ幅では2段組になるわけだ。
リンクを隠すやり方は、サンプルが見られる環境ならばおわかりのとおり、h2要素を左側に広げるというやりかたをとっている。これには、ちょっと算数が必要である。
#main {
width: 80%;
min-width: 155px;
float: left;
padding-top: 37px;
background-color: #eee0e0;
}
h2 {
position: absolute;
z-index: 2;
height: 37px;
margin-left: -25%;
margin-top: -37px;
padding-left: 25%;
text-align: right;
white-space: nowrap;
background-color: #fff568;
}まず、#mainはbodyの80%である。で、メニュー部分を隠すためには、#mainの中にあるh2要素をbodyの20%だけ左側にずらす必要がある。これは、#mainの25%左にずらすことと同じ。よって、margin-leftは-25%になる。これ、計算上はあっているし挙動も予想通りだが、実際にはウインドウ幅によってピクセルの端数が出るので、1ピクセル単位でデザインするのには向かないのかもしれない。
いろいろ小細工をしているが、ここまでやれば、アクセシビリティに考慮し、HTMLもそれなりにまともにし、さらに、デザインの制約を下げることができる。div要素使いまくり、position: absoluteしまくりのデザインと同等、というわけにはさすがにいかないが、それでもかなり遊べると思う。ADPが今後リニューアルするときは、これをベースにするつもり。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/262
うーむ、メニュー隠しのあたり、改稿の必要がありそう。
自分用メモ：position:absoluteをしたとき、親の幅を基準にする（#mainの25%など）のはIE6だけかも。ブラウザによって解釈が違うので、このやりかたは一色で塗りつぶすとき以外は役に立たないということになる。