人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【スタイルシートの疑問】スタイルシート(CSS)の解説で、「デザインに関する部分(CSS)と、コンテンツ(HTML)を分離することができる(=だからSEO的にもいい)」という記述をよく見かけるような気がします。そこで今後のデザインの変更の可能性を考慮して、実際にCSSでサイトを構築してみましたが、自分の思うようなデザインにするにはHTML内にデザインするためのDIVだとかを埋め込んでしまい、とてもコンテンツ構造を素直にあらわすHTMLは作成できませんでした。また次にレイアウト変更する場合も、HTML内のDIVに依存してしまい、CSSとHTMLの両方を書き直す事になってしまいました。(もちろん文字色だとか行間だとかを変更したい場合は有効ですけど)
実際の上手くデザイン分離、デザイン変更はCSSだけ!なんていう例はあるのでしょうか?あるいは、そもそもCSSの理解が誤りなのでしょうか?抽象的な質問ですが、ご意見等いただけたらと思います。
なお、当方は個人的な趣味の範囲でのCSS等を理解しているレベルです。プロ(仕事)ではありません。

●質問者: antimok
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS HTML SEO コンテンツ サイト
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● komorebi
●50ポイント

某場所でCSSや、構造化、アクセシビリティなどの講師、執筆などもしている者です。


本来、(X)HTMLというのは、

論文を広く呼んでもらうために作られたのが、そもそもの話です。


ですので、文章構造が論的に出来ている・・・

つまり「見出し」があって、「本文」がある、というツリー構造である必要があります

それの見栄えや表現を豊かにするモノが、CSSであったり、JavaScriptと考えると、

まず良いかもしれません。


分かりやすい構造例は「新聞」を考えるといいかもしれません。

必ず「大見出し」があり、それに関する「中見出し」「小見出し」があり、

「本文」があるツリー構造だと思います。「小説」も同じです。


ただテキストばかりでは読みづらいから、装飾がしてあります。

その装飾(色や大きさやデザイン)が、CSSになります。


ですので、デザインについては、

「広告」のようなイメージや、「ポスター」のようなデザインで考えていらっしゃるならば、

もしかしたら、「構造的ではない」可能性があるかもしれません。

#もちろん場合によりますが・・・


また、それを表現するのが不可能ではありませんが、

CSSレイアウトが難しい。とおっしゃるのでしたら、

文書構造あった上で、デザインを考える。

というフローから始めてみると飲み込みやすいと思います。


Div要素についても、文書構造が成り立ってる上で、

それらの1グループをくくる“輪ゴム”的な役割として使用すると考えてみてください。

そして、その輪ゴムで囲ったモノが分かりやすいように、

id属性やclass属性という「名札」をつけると考えると、

文章構造的な(X)HTMLが考えやすくなると思います。

#もちろん、デザインの表現的にDiv要素が多少増えてしまったりする場合は、もちろんあります。


具体例的なものとしては、以下のようなサイトで

どれだけCSSレイアウトで作られたモノがあって、そこにどんだけ表現力があるのか、

他の人は、どうつくってるのは見て、覗いて、

どんなレイアウトなら作りやすくて、どんなのは作りにくいのかも考えてみるといいかもしれません。

» CSS 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が検索エンジン的にもいいのは私も実感しています。参考にさせていただきます。


3 ● tera-p
●50ポイント

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を再考してみたいと思います。


4 ● takaramonob
●50ポイント

”デザイン変更はCSSだけ”の実例といえば、多くのブログ(ホスティング)サイトで公開されているブログがそうだと思います。

ユーザーごとにデザインは違いますが、HTMLには手は加えられていません。

例えば、CSSだけでレイアウトされたページで、左側にメニュー、その右側にメインコンテンツといった構造のページの、メニュー部分を右側へ変更するような場合、HTMLに手を加える必要はないですが、変更したいページがスライス画像を詳細に配置しているようなページであったり、新たな内容を付け加えたりする場合は、HTMLにも手を加える必要があることのほうが多いと思います。

私も趣味程度にサイト作りをしていますが、個人的には、スタイルシートを深く追求する価値は大いにあると思います。

一口にウェブデザインといっても幅がひろく、一概にはいえませんが、アートを追求しないページであれば、ほとんどの場合、スタイルシートだけでデザイン変更は可能だと思います。

スタイルシートのみでしっかりしたデザインを実現しているページをいろいろ見ることができるサイトのURLを記載しておきます。

http://cssvault.com/

◎質問者からの返答

CSSでデザインされたサイトも色々なのがあるんですね。

CSSでデザインしようとすると、どうしてもブラウザ互換だとか、裏技だとか、小手先の技に気をとられてしまって、全体が見えなくなってしまっていたのかもしれません。


5 ● nacbox
●50ポイント

非常に分かりやすい例として、css zen gardenを紹介します。

http://www.csszengarden.com/tr/japanese/

ここには膨大なデザイナーによる、膨大なページデザインがあります。(ページ左側のリストから選択・「全デザインを見る」でサムネイル表示に出来ます)

しかし、HTMLは、どのデザインも同じものを使用しており、完全に、CSSの差異だけで、この多様なデザインを実現しています。

HTMLとCSSが完全に内容とデザインに分離されている、格好の例ではないでしょうか。

ご参考にして下さい。

◎質問者からの返答

URLありがとうございます。

まさしく理想とされるサイトですね。

大変参考になります。


1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ