まとめ。
div要素を使わないCSSによるレイアウトを説明してきたわけだが、サンプルのキャプチャ内に何度も紹介したように、地雷を踏まなければうまくいく。
出来上がったHTMLのソースからは判断が難しいと思うが、今回の説明を見ればどういうふうに考えていけばdiv要素なしレイアウトができるのか、わかったもらえたんじゃないかと思う。
大変なのは、どこの要素にどの背景画像を担当させるかということ。あと、要素の中身をどうやってうまく配置するかということである。これは、使える要素が限られていることと、IE6の後方互換モード対策でwidthとpaddingを同時指定しない、という足かせがあるからだ。
IE6を標準準拠モードで動かす（XML宣言を書かない、または、HTML4.01 Strictを使う、など）ならば、width/heightとpaddingの同時指定が可能になるので、かなり楽になる。また、divを使っていいなら、最悪空のdivを2重でかましてしまえばいいだけなので、div要素を使わないというお題目を立てたからこそ出てくる課題だということになる。
要素の中身をうまく配置するためには、dl/ul/olやformのように、中にブロック要素が必ず入ってくる要素を効率的に使うことが重要だ。
いくつかいいわけ。
少なくとも自分は、作成段階では構造と表現を分離しないで考えている。Photoshopで完成図レイアウト画像を作りながら、ここの要素でここを担当させる、というのをまとめて考えている。つまり、結果的に見れば見た目のための要素がbody要素以下から消えている、というだけだ。div要素を使わない＝構造と表現の分離の理想形、という考え方もあると思うわけれど、むしろ、デザインの汎用性を高めるならばdivを適切に使ったほうがいい。
ピクセル指定にしているのは、画像を使っているためで、余白等もこの画像に対しどれくらいの割合でないと困る、などと考えて、ほとんどすべてにピクセル指定を行っている。ここらへんのこだわりがなければ、パーセント指定でやってもできると思う。
position: absoluteを使いまくっているが、floatにするのは思ったより簡単ではない。floatが使えないかぎり、フッターを置くのも困難だ。このあたりは引き続き課題となる。
てなわけで、ようやく、2月1日に書いたADP: なやみどころの説明ができたことになる。これだけネタがあることを理解できた人がどれだけいたことやら（笑）。
今回の話は、こういうこともできますよ、というネタとして見てかまわない。また、紹介したテクニックをうまく利用して、div要素なしに挑戦したり、見た目のためにしか見えない無駄なdiv要素を消し飛ばすのもいいと思う。やってみやってみ。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/312
あえて何かをしない、と言うのはとても大変ですが、とても大事でもありますね。
拘りが新しい何かを生む。出来上がるまでは苦しいけれど勝利の美酒は格別。成果は全部自分のもの。(^_^)
ありがとうございます。あとは、div要素を使わないままfloatが使いこなせるようになればいいんですが、なかなか難しい。これからもいろいろこだわってみたいと思います。
とても勉強になりました、ありがとうございました。最初に『float を使ってできないのかな？』と思っていましたが、やはり・・・今のところ難かしいみたいですね。またのこだわりを楽しみにしています。
ありがとうございます。floatを使う場合は、なにかしらボックスごとひとつの要素でくくってしまうことがどうしても必要になります。liやdd要素でなんとかやっちゃう手はありますが、divの代わりに、というのも本末転倒な感じがしています。