【ｽﾀｲﾙｼｰﾄの疑問】ｽﾀｲﾙｼｰﾄ(CSS)の解説で､｢ﾃﾞｻﾞｲﾝに関する部分(CSS)と､ｺﾝﾃﾝﾂ(HTML)を分離することができる(＝だからSEO的にもいい)｣という記述をよく見かけるような気がします｡そこで今後のﾃﾞｻﾞｲﾝの変更の可能性を考慮して､実際にCSSでｻｲﾄを構築してみましたが､自分の思うようなﾃﾞｻﾞｲﾝにするにはHTML内にﾃﾞｻﾞｲﾝするためのDIVだとかを埋め込んでしまい､とてもｺﾝﾃﾝﾂ構造を素直にあらわすHTMLは作成できませんでした｡また次にﾚｲｱｳﾄ変更する場合も､HTML内のDIVに依存してしまい､CSSとHTMLの両方を書き直す事になってしまいました｡(もちろん文字色だとか行間だとかを変更したい場合は有効ですけど)某場所でCSSや､構造化､ｱｸｾｼﾋﾞﾘﾃｨなどの講師､執筆などもしている者です｡
本来､(X)HTMLというのは､
論文を広く呼んでもらうために作られたのが､そもそもの話です｡
ですので､文章構造が論的に出来ている･･･
つまり｢見出し｣があって､｢本文｣がある､というﾂﾘｰ構造である必要があります｡
それの見栄えや表現を豊かにするﾓﾉが､CSSであったり､JavaScriptと考えると､
まず良いかもしれません｡
分かりやすい構造例は｢新聞｣を考えるといいかもしれません｡
必ず｢大見出し｣があり､それに関する｢中見出し｣｢小見出し｣があり､
｢本文｣があるﾂﾘｰ構造だと思います｡｢小説｣も同じです｡
ただﾃｷｽﾄばかりでは読みづらいから､装飾がしてあります｡
その装飾(色や大きさやﾃﾞｻﾞｲﾝ)が､CSSになります｡
ですので､ﾃﾞｻﾞｲﾝについては､
｢広告｣のようなｲﾒｰｼﾞや､｢ﾎﾟｽﾀｰ｣のようなﾃﾞｻﾞｲﾝで考えていらっしゃるならば､
もしかしたら､｢構造的ではない｣可能性があるかもしれません｡
#もちろん場合によりますが･･･
また､それを表現するのが不可能ではありませんが､
CSSﾚｲｱｳﾄが難しい｡とおっしゃるのでしたら､
文書構造あった上で､ﾃﾞｻﾞｲﾝを考える｡
というﾌﾛｰから始めてみると飲み込みやすいと思います｡
Div要素についても､文書構造が成り立ってる上で､
それらの1ｸﾞﾙｰﾌﾟをくくる“輪ｺﾞﾑ”的な役割として使用すると考えてみてください｡
そして､その輪ｺﾞﾑで囲ったﾓﾉが分かりやすいように､
id属性やclass属性という｢名札｣をつけると考えると､
文章構造的な(X)HTMLが考えやすくなると思います｡
#もちろん､ﾃﾞｻﾞｲﾝの表現的にDiv要素が多少増えてしまったりする場合は､もちろんあります｡
具体例的なものとしては､以下のようなｻｲﾄで
どれだけCSSﾚｲｱｳﾄで作られたﾓﾉがあって､そこにどんだけ表現力があるのか､
他の人は､どうつくってるのは見て､覗いて､
どんなﾚｲｱｳﾄなら作りやすくて､どんなのは作りにくいのかも考えてみるといいかもしれません｡
そうですね､どうしてもﾃﾞｻﾞｲﾝを頭に浮かべながらHTML構造を
作成していたのは否定できませんね｡
いったん､構造ありきでHTMLを作成するというのは､今度やってみようと思います｡
divを使うことは､､｢ﾃﾞｻﾞｲﾝに関する部分(CSS)と､ｺﾝﾃﾝﾂ(HTML)を分離することができる｣には反していません｡ｺﾝﾃﾝﾂを構造化する目的でdivを使っているのであれば､むしろ望ましいことです｡
そこで､ｺﾝﾃﾝﾂの文字属性や配置などﾃﾞｻﾞｲﾝ的な部分は､各々のdivに対し､style属性を割り当ててやれば良いのです｡このstyle属性をまとめてCSSﾌｧｲﾙに落としてやれば､CSSとHTMLを分離したことになります｡
たとえば､我が家のﾎｰﾑﾍﾟｰｼﾞのｺﾝﾃﾝﾂ(例：http://www.pahoo.org/athome/album/2006/album20060724-1.shtm)は――FlashやGoogleMapを使っている都合上､iframeやtableを使うという不本意な部分はあるものの――ﾃﾞｻﾞｲﾝ指定はCSSとして切り分け(ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰの動作もCSSになっています)､ｺﾝﾃﾝﾂ本体はXHTML1.0準拠にしています｡
おかげさまで､検索ｴﾝｼﾞﾝの上位に取り上げてもらっています｡
また､大部分のﾌﾞﾛｸﾞはﾃﾞｻﾞｲﾝをCSSとして切り離しているので､ｽｷﾝという形で､CSSを差し替えるだけでﾃﾞｻﾞｲﾝ変更が簡単にできるようになっています｡
たしかにﾌﾞﾛｸﾞのﾃﾝﾌﾟﾚｰﾄの関係はまさしく､CSSとHTMLの分離でしたね｡
構造のみのHTMLが検索ｴﾝｼﾞﾝ的にもいいのは私も実感しています｡参考にさせていただきます｡
CSS って，思想はよくわかるんですが，いざ使いこなそうとすると難しいですよね．特に div を使いこなそうとすると自分が何をやっているのかわからなくなってしまいがちになります．見栄えを凝るために一所懸命 div を切ったりしているうちに，ふと脳裏に｢本末転倒｣という言葉が浮かんできたり(だいたいそういうときって何かの締め切りを抱えていたりする…)．
ちょっと脱線してしまいましたが，CSSを使ってうまくﾃﾞｻﾞｲﾝ分離している例は，世の中にはいろいろあります．たとえば，はてなﾀﾞｲｱﾘｰ (http://d.hatena.ne.jp/) など，はてなのﾍﾟｰｼﾞもうまくCSSを使っていると思います．｢ﾍﾟｰｼﾞのｿｰｽ｣(FireFox なら Ctrl-U)で一度ご覧になると，div の使い方など参考になるのではないでしょうか．
で，はてなﾀﾞｲｱﾘｰを例にとってみると，｢意味のあるかたまり｣に対して div を切って，意味ごとに class でﾗﾍﾞﾙを振っているのがわかります．たとえば，｢ある日付の日記全体 (class="day")｣，｢日記の本文 (class="body")｣，｢ｺﾒﾝﾄ欄 (class="comment")｣などなど．
antimok さんがどのように CSS を設計されたのかわからないので，はずしていたら申し訳ないのですが，｢意味のかたまり｣ではなく｢ﾃﾞｻﾞｲﾝのかたまり｣に対して class を定義してしまっていたりしませんでしょうか．もしくは，class ではなく id を多用されたりしていませんでしょうか(｢ｺﾝﾃﾝﾂとﾃﾞｻﾞｲﾝの分離｣が崩れがちになります)．
最初の方の文章は､まさしく私がぶちあたった感覚と同じです｡
ﾃﾞｻﾞｲﾝがしたいためのdivを量産してしまって､これってﾃﾞｻﾞｲﾝ埋め込んでいるような…という感覚に陥りました｡
｢ﾃﾞｻﾞｲﾝのかたまり｣でHTMLの構造を定義しているといのは､まさしく言い当てられている気がします｡構造的なHTMLを再考してみたいと思います｡
”ﾃﾞｻﾞｲﾝ変更はCSSだけ”の実例といえば､多くのﾌﾞﾛｸﾞ(ﾎｽﾃｨﾝｸﾞ)ｻｲﾄで公開されているﾌﾞﾛｸﾞがそうだと思います｡
ﾕｰｻﾞｰごとにﾃﾞｻﾞｲﾝは違いますが､HTMLには手は加えられていません｡
例えば､CSSだけでﾚｲｱｳﾄされたﾍﾟｰｼﾞで､左側にﾒﾆｭｰ､その右側にﾒｲﾝｺﾝﾃﾝﾂといった構造のﾍﾟｰｼﾞの､ﾒﾆｭｰ部分を右側へ変更するような場合､HTMLに手を加える必要はないですが､変更したいﾍﾟｰｼﾞがｽﾗｲｽ画像を詳細に配置しているようなﾍﾟｰｼﾞであったり､新たな内容を付け加えたりする場合は､HTMLにも手を加える必要があることのほうが多いと思います｡
私も趣味程度にｻｲﾄ作りをしていますが､個人的には､ｽﾀｲﾙｼｰﾄを深く追求する価値は大いにあると思います｡
一口にｳｪﾌﾞﾃﾞｻﾞｲﾝといっても幅がひろく､一概にはいえませんが､ｱｰﾄを追求しないﾍﾟｰｼﾞであれば､ほとんどの場合､ｽﾀｲﾙｼｰﾄだけでﾃﾞｻﾞｲﾝ変更は可能だと思います｡
ｽﾀｲﾙｼｰﾄのみでしっかりしたﾃﾞｻﾞｲﾝを実現しているﾍﾟｰｼﾞをいろいろ見ることができるｻｲﾄのURLを記載しておきます｡
CSSでﾃﾞｻﾞｲﾝされたｻｲﾄも色々なのがあるんですね｡
CSSでﾃﾞｻﾞｲﾝしようとすると､どうしてもﾌﾞﾗｳｻﾞ互換だとか､裏技だとか､小手先の技に気をとられてしまって､全体が見えなくなってしまっていたのかもしれません｡
非常に分かりやすい例として､css zen gardenを紹介します｡
http://www.csszengarden.com/tr/japanese/
ここには膨大なﾃﾞｻﾞｲﾅｰによる､膨大なﾍﾟｰｼﾞﾃﾞｻﾞｲﾝがあります｡(ﾍﾟｰｼﾞ左側のﾘｽﾄから選択･｢全ﾃﾞｻﾞｲﾝを見る｣でｻﾑﾈｲﾙ表示に出来ます)
しかし､HTMLは､どのﾃﾞｻﾞｲﾝも同じものを使用しており､完全に､CSSの差異だけで､この多様なﾃﾞｻﾞｲﾝを実現しています｡
HTMLとCSSが完全に内容とﾃﾞｻﾞｲﾝに分離されている､格好の例ではないでしょうか｡
ご参考にして下さい｡
URLありがとうございます｡
まさしく理想とされるｻｲﾄですね｡
大変参考になります｡
