よくあるレイアウトの典型として2004年に作ったデザインテンプレート0710を手直しした。デザインテンプレート0710rのサンプルを参照のこと。HTMLにおいて、ページのタイトルをh1になるように変えたことが一番の変更点であるが、そのほかも、1)デザインを微調整、2)おまけ部品群を追加、3)サブメニューより本文をHTMLの前方に、など、いろいろ変えている。
<div id="container">
<ul id="header">
<li id="logo">ロゴ</li>
</ul>
<ul id="mainnav">
</ul>
<p id="breadcrumbs"></p>
<h1>タイトル</h1>
<div id="content">
<h2></h2>
</div>
<div id="subnav">
<h2>Related</h2>
</div>
<div id="footer">
<h2>Information</h2>
</div>
</div>上記の構造だと、#containerの中に#header, #mainnav, #breadcrumbs, h1, #content, #subnav, #footerが横並びになる。h1より前はいわゆるおまけだ。他の人に更新をお願いする場合は#contentの中にいくつもh2以下の見出しが入ってくるので、ひとつの見出しにひとつのdiv、というルールにはしていない。だが、それもやろうと思えばできるようになっている。
よく考えつきそうなHTMLの構造でよくあるレイアウト、なのに、とても大変、というのを説明するのが今回のエントリの目的でもある。
まず、floatを使ってどうやってh1を今回のようなよくあるレイアウトのタイトルの位置にもってくるのか、がひとつめの課題になる。もちろん、#subnavが本文より短くても長くても、またh1が2行以上になっても問題ないようなレイアウトにしなければならない。
よくあるレイアウトでのページタイトル（h1）の位置 (400 by 200 pixels, 11.7KB)
解法はみりばーるさんに教えていただいた。#breadcrumbsではfloat:rightとwidthを、h1や#contentではfloat:rightとwidthとclear:rightを指定し、それで#subnavではfloatを指定せず通常フローのまま左側に流し込む。不思議なclear:rightはIE6対策である。
さらに、IE6ではfloatを指定しない場合、3pxのずれができて、ときどき大変なことになる。そのため、よっぽどのことがないかぎり、ADP: floatレイアウトでつまづかないためのTipsで書いたようにfloatレイアウトでは横に並ぶボックスすべてにfloatを指定したほうがリスクが少ない。だが今回は#subnavにfloatを指定できないので、3pxのずれを回避する必要がある。幸い、floatを指定しないボックス（#subnav）が左側に来る場合は、float:rightしたボックスとの隙間が3px以上になるよう#subnavのwidthを指定すればIE6でもまったく同じ配置にできるので、それで回避できる。ただし、隙間が3pxに満たない場合はIE6だけカラム落ちするので注意が必要だ（つまり、3pxのずれは存在している）。
ふたつめの課題は、#breadcrumbsやh1の右側の余白をどうやって確保するか、である。
確保すべき余白(287 by 127 pixels, 7.4KB)
図のように、背景に色をつけたいので、横のpaddingを37ピクセルずつ、margin-rightを8ピクセルとりたい。
しかし、#breadcrumbsやh1は#containerの右端と接しているので、ここでmargin-rightを指定するとIE6だけマージンが2倍になる。また、#breadcrumbsやh1はwidthを指定する必要があるので、IE6の後方互換モード対策でpaddingを同時には指定できなくなる。となると、右側の余白を指定する方法がなくなってしまうのだ。
ここでは、どうしようもないのでズルをする。IE6の後方互換モードは、右側のマージンを2倍でカウントし、widthにpaddingを含めてしまうわけだから、はじめにそうなるようにわざと間違った指定をし、あとでIE6よけ（head+body）を使って正しい指定をすればよい。いちおうこれで同じ表示になる。
#breadcrumbs {
float: right;
margin: 0 4px 0 0; /* double margin float bug in IE6 */
padding: 1em 37px 0 37px;
width: 550px; /* width includes padding in quirks mode */
}
head+body #breadcrumbs {
width: 476px;
margin-right: 8px;
}これの問題は、IE6が後方互換モードで解釈してくれないと、間違った指定を正しく解釈してしまうのでレイアウトが崩壊することである。よって、XML宣言つきのXHTML以外でやる場合は書き換えが必要になる。
ADP: IE6のwidth解釈バグ対処法はじめ、ADPでいつも言っている「widthとpaddingを一緒に指定しない」がなぜいいかといえば、正しい指定のみを行って正しく解釈しても間違って解釈しても同じ表示になるようにしているため、UAが間違った指定のみを正しく解釈してしまうリスクを排除できるからである。最終的には正しくなるように記述しているとはいえ、この点において今回のやり方は汎用性をひとつ欠いていることになる。
ちなみに、なんたらハックを使う手もあるのだろうが、自分自身がよく知らないのと、将来UAが採用するか、採用しないかによって大きく見た目が変わってしまう危険性があるので、使わないようにしている。標準に従った書き方で、標準の見た目になるように書いておけば、将来のUAが間違うリスクを確実に最小化できる。
個人的には、このHTMLの構造でこのよくあるレイアウト、というのは悲願のひとつだった。問題はあるが、問題のありかと回避方法を列挙した上でここまでできたことにある程度満足している。なにより、これで自分が作るぐらいの小、中規模のサイトであれば、すべてこのHTMLで（当面）やっていけるようになったことが大きい。
もちろん、もっといいやり方があったら教えてください。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/654