人力検索はてな人力検索はてなモバイル版を表示しています。PC版はこちら【スタイルシートの疑問】スタイルシート(CSS)の解説で、「デザインに関する部分(CSS)と、コンテンツ(HTML)を分離することができる(=だからSEO的にもいい)」という記述をよく見かけるような気がします。そこで今後のデザインの変更の可能性を考慮して、実際にCSSでサイトを構築してみましたが、自分の思うようなデザインにするにはHTML内にデザインするためのDIVだとかを埋め込んでしまい、とてもコンテンツ構造を素直にあらわすHTMLは作成できませんでした。次にレイアウト変更する場合も、HTML内のDIVに依存してしまい、CSSとHTMLの両方を書き直す事になってしまいました。(もちろん文字色だとか行間だとかを変更したい場合は有効ですけど)実際の上手くデザイン分離、デザイン変更はCSSだけ!なんていう例はあるのでしょうか?あるいは、そもそもCSSの理解が誤りなのでしょうか?抽象的な質問ですが、ご意見等いただけたらと思います。当方は個人的な趣味の範囲でのCSS等を理解しているレベルです。プロ(仕事)ではありません。▽最新の回答へ▽1●komorebi●50ポイント某場所でCSSや、構造化、アクセシビリティなどの講師、執筆などもしている者です。論文を広く呼んでもらうために作られたのが、そもそもの話です。文章構造が論的に出来ている・・・つまり「見出し」があって、「本文」がある、というツリー構造である必要があります。それの見栄えや表現を豊かにするモノが、CSSであったり、JavaScriptと考えると、まず良いかもしれません。分かりやすい構造例は「新聞」を考えるといいかもしれません。「本文」があるツリー構造だと思います。テキストばかりでは読みづらいから、装飾がしてあります。その装飾(色や大きさやデザイン)が、CSSになります。「広告」のようなイメージや、「ポスター」のようなデザインで考えていらっしゃるならば、もしかしたら、「構造的ではない」可能性があるかもしれません。#もちろん場合によりますが・・・また、それを表現するのが不可能ではありませんが、CSSレイアウトが難しい。文書構造あった上で、デザインを考える。いうフローから始めてみると飲み込みやすいと思います。Div要素についても、文書構造が成り立ってる上で、それらの1グループをくくる“輪ゴム”的な役割として使用すると考えてみてください。文章構造的な(X)HTMLが考えやすくなると思います。#もちろん、デザインの表現的にDiv要素が多少増えてしまったりする場合は、もちろんあります。他の人は、どうつくってるのは見て、覗いて、どんなレイアウトなら作りやすくて、どんなのは作りにくいのかも考えてみるといいかもしれません。Mania◎質問者からの返答そうですね、どうしてもデザインを頭に浮かべながらHTML構造を作成していたのは否定できませんね。構造ありきでHTMLを作成するというのは、今度やってみようと思います。▽2●pahoo●50ポイント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が検索エンジン的にもいいのは私も実感しています。参考にさせていただきます。最初の方の文章は、まさしく私がぶちあたった感覚と同じです。デザインがしたいためのdivを量産してしまって、これってデザイン埋め込んでいるような...という感覚に陥りました。「デザインのかたまり」でHTMLの構造を定義しているといのは、まさしく言い当てられている気がします。構造的なHTMLを再考してみたいと思います。▽4●takaramonob●50ポイント”デザイン変更はCSSだけ”の実例といえば、多くのブログ(ホスティング)サイトで公開されているブログがそうだと思います。ユーザーごとにデザインは違いますが、HTMLには手は加えられていません。CSSだけでレイアウトされたページで、左側にメニュー、その右側にメインコンテンツといった構造のページの、メニュー部分を右側へ変更するような場合、HTMLに手を加える必要はないですが、変更したいページがスライス画像を詳細に配置しているようなページであったり、新たな内容を付け加えたりする場合は、HTMLにも手を加える必要があることのほうが多いと思います。私も趣味程度にサイト作りをしていますが、個人的には、スタイルシートを深く追求する価値は大いにあると思います。一口にウェブデザインといっても幅がひろく、一概にはいえませんが、アートを追求しないページであれば、ほとんどの場合、スタイルシートだけでデザイン変更は可能だと思います。スタイルシートのみでしっかりしたデザインを実現しているページをいろいろ見ることができるサイトのURLを記載しておきます。http://cssvault.com/◎質問者からの返答CSSでデザインされたサイトも色々なのがあるんですね。CSSでデザインしようとすると、どうしてもブラウザ互換だとか、裏技だとか、小手先の技に気をとられてしまって、全体が見えなくなってしまっていたのかもしれません。gardenを紹介します。http://www.csszengarden.com/tr/japanese/ここには膨大なデザイナーによる、膨大なページデザインがあります。(ページ左側のリストから選択・「全デザインを見る」でサムネイル表示に出来ます)しかし、HTMLは、どのデザインも同じものを使用しており、完全に、CSSの差異だけで、この多様なデザインを実現しています。HTMLとCSSが完全に内容とデザインに分離されている、格好の例ではないでしょうか。◎質問者からの返答URLありがとうございます。理想とされるサイトですね。Webの仕事をするようになりました。製作にあたって悩...WEB制作初心者です。Type4を利用しウェブサイトを作成している途中です。□はてなトップ(C)株式会社はてな。