ADPでどうやってdiv要素を使わずにCSSでレイアウトをしているか、について説明していなかったので、何回かにわけて説明したい。基本的には、これまで書いてきたことの複合技。
なぜdiv要素を使わないかは、もともとは「見た目orientedだからってdiv厨ではない」ということを示したかったからだ。テーブルレイアウトはやめてCSSを使おう、となると、どうしてもdiv, div, divになりがちだが、div要素やspan要素をいっさい使わなくても、これぐらいまでならデザインできる、というのをアピールするのが当初の目的だった。
が、ウェブデザインテクニックが初心者の方々にも見てもらえるようになるにつれて、最強のSEOテクニックのひとつとしての側面が強くなってきたように思える。つまり、できるだけ多くの人に見てもらいたい、そのために検索の順位を上げたい、と考えるならば、div要素は使うだけ損だということだ。div要素を1個でも使ったら負け組だ、とまでは言わないが、キーワードのポイントがdivで囲むたびに1段ずつ下がってしまうのは、まず間違いない。div要素を使わなければ、クローキング（SEOスパムのひとつ）でロボット用に見せる専用ページと同じくらい「最適化」されたソースにすることができる。
使うのはXHTML 1.0 Strict、XML宣言あり。よって、まともな解釈をする標準準拠ブラウザ（Opera, Mozilla）と、後方互換でつっぱしるIE6の両方に対応させる必要がある。HTMLのbody要素以下の概要は以下のとおり。
<body>
<h1>えーでぃーぴー</h1>
<h2>div要素なし</h2>
<p>うまく地雷を踏まなければレイアウトできますよ。</p>
<ul id="contents">
<li id="top"><a href="">top</a></li>
</ul>
<dl id="navi2">
<dt>prev</dt>
<dd>夏休みの宿題</dd>
</dl>
<form action="" id="searchbox">
<p><input /></p>
</form>
</body>たぶんこれでできるはず。bodyの下に、見出し、本文、が連続して続くあたりが強そうでしょ？
これにCSSを適用していく。この説明は次回以降。わかる人はわかると思うが、formがなぜあるのか、あたりがキーになる。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/308
初めまして、GREEDと申します。
いつも楽しくCSSのお勉強させてもらってます。DIVを使用しないCSSデザイン、確かに理想ですよね。
今回のFORMの必要性、恥ずかしながらわかりませんでした。ひょっとしてマージン取るために使用するのでしょうか？
GREEDさんありがとうございます。第3回でform要素の話を書きました。そのうちまとめエントリも書きますが、div要素を使わない場合は、どの要素でどこの背景を担当させて、その中身をどうやってうまく配置するか、という課題がいきなり大変になるわけです。レイアウトという場合、メニューが左、本文が右、もレイアウトですが、実際のデザインで大変になるのはその他部品群の配置になると思います。
レスありがとうございます。なるほど～DIV使わないのですからFORMも無駄にできませんね。id付けてさらにそれに対応したpでマージンなどを制御する訳ですね。確かに配置が大変だ...、でもこれは一番環境にやさしい綺麗なソースになりそうですね（笑）
貴殿のウェブサイトのHTML文書には XHTML1.0 Strict が採用されていますが、敢えて div タグを使用せず、 section を明示しないのであれば ISO-HTML を採用されては如何でしょうか。詳細は http://members.jcom.home.ne.jp/pctips/15445/15445Idea.html などを参照してください。
ありがとうございます。ISO-HTML、うちのサイトは移行も難しくはないと思います。ただ、メリットがわかりにくいです。いろいろ調べてみます。
ISO-HTML、少し調べてみましたが、JavaScriptが使えないんですね。パスかな・・・
HTMLが詳しくない自分には目からうろこの情報ばかりで勉強になりました！
他のサイトで、テーブルを使用したレイアウトはよくないと聞いて「よし！divを覚えるぞ」と思っていた矢先本ページを見て、何が正しいのかわからなくなりました。
このページでは、SEOを重視する場合にはdiv、spanを使用するなということですよね？
デザイン系のサイトを見ていて感じたのですが、皆さん強い哲学と美学を持ってらっしゃいますね。
ただ、中には特定の方法論以外は排除しようとする人がいるのはどうかと思います。
生命と同じで、色々な考えがあるからこそ進化があると思っています。
場違いだったかな。。。？すみません。
通りすがりさん、ありがとうございます。
もし謙遜でなく、本当にCSSレイアウトの初学者でしたら、まずはdivを使った一般的なやり方をご覧になることをお勧めします。
divの使用をゼロにするレイアウトは、SEOのメリットはたしかにありますが、扱いづらく応用もほとんど利きません。ですので、このページの内容は、1) ネタとしてみる、2) ムダなdivの使用を減らすためのテクニックとしてみる、3) デメリットを十分理解した上でdivなしに挑戦するためにみる、という感じで利用していただけるといいなあ、と考えています。
div、span使わないCSSとはとても驚きました。
このサイト自体もそうなっているようですね！すごいです。
------------------------------------------------------------
キーワードのポイントがdivで囲むたびに1段ずつ下がってしまうのは、まず間違いない。
------------------------------------------------------------
これは本当なんでしょうか！？
聞いたことないので驚きました本当に。
どこからの情報でしょうか？
本当だとしたらものすごいことですこれは。もちろんdivを一個使うごとの減点度にもよりますが。
poipoipoiさん、ありがとうございます。
まずはじめに、検索エンジン自身が「これをやるとプラス何ポイント、これはマイナス何ポイント」といった具体的な指標を公表していることは、まずないと思います。すぐ悪用されてしまいますから。ですので、SEOと呼ばれるものはほとんどが（統計的推計を行う、行わないに関わらず）試行錯誤の蓄積によるものです。私の回答もその上での説明になります。
SEOと呼ばれるものの基本は、0)利用者が求める情報を載せること（大原則！）、1)リンクを多く張られるようにすること、2)ページをシンプルにし適切なキーワードを適量まぶすこと、に大別されます。2)では、キーワードの（ページにおける）相対的重要性を高めることも効果的であるとされます。このため、キーワードをタイトルや見出しに入れたり、ファイルサイズを小さくしたり、本文や見出しにおけるタグのネスト（入れ子）をできるだけ少なくしたほうがいいわけです。テーブルレイアウトがSEO的に不利である、とされたのも、テーブルでは必然的にネストが多くなるから、でした。
よって、ネストが不利、という経験則をあてにすれば、キーワードのポイントがdivで囲むたびに1段ずつ下がってしまうことも自ずと言えると思います。個人的な経験から言っても、以前はdivなしのおかげで順位アップを体感できました。現在どうなっているかはわからないのですが、概ね傾向は変わっていないと思います。