構造と表現の分離の「ネタとしての」究極形態であるdiv/span/id/classを使わないCSSレイアウト、IE6に対応しないことで案外あっさり実現できそうなので紹介してみる。いまIE6を見捨てることは非現実的だが、数ヶ月も経てば状況も変わる。ソース等はdiv/span/id/classを使わないCSSレイアウトのサンプルを参照のこと。いまのADPのレイアウトをかなり再現できることがわかるはず（ついでに言うと、アンカー用のid付加を許容すればほぼ完全に再現できる）。
以下は解説編。最初に、お役立ちを。
なにより、究極のSEOテクニックのひとつとなる。「tableレイアウトはやめよう」から始まった単体のHTMLでできる検索エンジン対応としてはひとつのゴールに到達してしまったとも言える（言いすぎ）。
ずるい手を使った結果ではあるが、本文ではかなり自由に要素を使える設計にしてある。この点が、（一度メニューで使ってしまったため）ul, ol, dlが本文で使えないjasonspage.netのNo Divとは違う点だ。
では、実際どんなことをやっているのかを説明する。
body以下の要素から、通常使う場所がほとんど決まっていて、複数回自由に使う必要がないものを選んでくる。h1やformやaddressがあげられるだろう。今回は、サイト内検索のformを起点にしてナビゲーション部が始まると見なし、formの下のulを上部メニュー、さらにその下のdlをサイドバーとする。この「裏ルール」を用いれば、隣接セレクタを使って各ナビゲーション部を特定できる。
今回は面倒なのでやっていないが、属性セレクタを用いてサイト内検索のformを指定すれば、本文中でも別のform要素を用いることができる。
引き続いて、順番に関する各種の裏ルールを設定する。上部メニューはボタンの順番を固定する。body以下の最初のブロック要素は、トップページに戻るリンクなどを置くヘッダーとする。h1のすぐ次には必ず日付などメタ情報を記述する。などなど。
順番を決めてしまえば、CSSで要素を特定することは簡単である。たとえば、"form+ul li+li+li+li a"に過去記事一覧のボタン画像をはりつけるというように。一方、特定されない要素については一般的な見た目を与える。これで、本文中でもul/ol/dlなどを使うことができるようになる。
first-child疑似クラスや隣接セレクタや属性セレクタを使うため、対応しないIE6ではうまくいかない。このため、さらに子セレクタによる振り分けなどを使ってIE6でも最低限読めるようにする。
あとはdiv要素なしレイアウトと似たようなやり方で要素を配置すればよい。現在のADPのレイアウトは、divなしでかつIE6の後方互換モードに対応するようきつい縛りがかかっており、サンプルのCSSもそれを流用したため縛りを踏襲しているが、今回のはIE6を除外しているのだからもっと遊べるはずだ。
もし（数ヵ月後）実用化するなら、裏ルールの明文化やCMS化が必要となる。ただし、本文の自由度を上げているので、一度CMS化してしまえば運用も十分可能である。
最後に、これがなぜ「ネタとしての」なのかを説明する。
今回の話は、div/span/id/classを一切使っていないため、HTMLの側では見た目に関する情報を表向き排除している。しかし、実際はCSSの都合で完全に要素の順番が決まっていて、結果としてdiv/span/id/classのない、ぱっと見かなりstrictなHTMLになっているに過ぎない。つまり、構造と表現がいつも以上に密接にくっついている。これは、CSSを見ると無理が出ているのがまるわかりになっていることからもわかる。なので「構造と表現の分離」の観点から見れば、今回の話は完全にネタである。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/615