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

実際の上手くデザイン分離、デザイン変更はCSSだけ!なんていう例はあるのでしょうか?あるいは、そもそもCSSの理解が誤りなのでしょうか?抽象的な質問ですが、ご意見等いただけたらと思います。
なお、当方は個人的な趣味の範囲でのCSS等を理解しているレベルです。プロ(仕事)ではありません。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/04/25 00:19:35
  • 終了:2008/04/26 22:50:29

回答(7件)

id:komorebi No.1

komorebi回答回数133ベストアンサー獲得回数82008/04/25 00:51:59

ポイント50pt

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


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

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


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

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

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

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


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

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

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


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

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


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

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

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

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


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

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

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

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


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

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

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

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

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

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


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

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

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

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

» CSS Mania

id:antimok

そうですね、どうしてもデザインを頭に浮かべながらHTML構造を

作成していたのは否定できませんね。

いったん、構造ありきでHTMLを作成するというのは、今度やってみようと思います。

2008/04/25 22:38:50
id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332008/04/25 01:15:04

ポイント50pt

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を差し替えるだけでデザイン変更が簡単にできるようになっています。

id:antimok

たしかにブログのテンプレートの関係はまさしく、CSSとHTMLの分離でしたね。

構造のみのHTMLが検索エンジン的にもいいのは私も実感しています。参考にさせていただきます。

2008/04/25 22:41:53
id:tera-p No.3

tera-p回答回数92ベストアンサー獲得回数212008/04/25 01:59:18

ポイント50pt

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 を多用されたりしていませんでしょうか(「コンテンツとデザインの分離」が崩れがちになります).

id:antimok

最初の方の文章は、まさしく私がぶちあたった感覚と同じです。

デザインがしたいためのdivを量産してしまって、これってデザイン埋め込んでいるような…という感覚に陥りました。

「デザインのかたまり」でHTMLの構造を定義しているといのは、まさしく言い当てられている気がします。構造的なHTMLを再考してみたいと思います。

2008/04/25 22:45:12
id:takaramonob No.4

takaramonob回答回数77ベストアンサー獲得回数52008/04/25 02:03:04

ポイント50pt

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

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

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

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

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

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

http://cssvault.com/

id:antimok

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

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

2008/04/25 22:48:53
id:nacbox No.5

nacbox回答回数80ベストアンサー獲得回数42008/04/25 10:54:45

ポイント50pt

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

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

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

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

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

ご参考にして下さい。

id:antimok

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

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

大変参考になります。

2008/04/25 22:50:07
id:ken33jp No.6

ken33jp回答回数928ベストアンサー獲得回数132008/04/26 02:16:52

ポイント50pt

Movable Typetとかが吐き出すコードをみて勉強してください。

昔と違ってCSSの対応もマシになってるので、

HTMLとCSSを効果的に分けたほうがSEO的に有利ですし、

Goggleさんとかも、こういうテンプレートを意識してやってるので、

たいぴしたほうが有利です。

完全に分離はできないので、テーブルタグも一部併用するのが現在の主流です。

なんでもほどほどにしないと駄目案です。

なんちゃって専門家は、極端な意見をいうので、実用的でないです。

http://q.hatena.ne.jp/answer

id:antimok

アドバイスありがとうございます。

原則論にこだわりすぎちゃう所はたしかにありますので、柔軟に考えてみたいと思います。

2008/04/26 22:39:23
id:Quphondi No.7

Quphondi回答回数59ベストアンサー獲得回数22008/04/26 08:29:04

ポイント50pt

 私が(x)html+cssを覚えた時にやはり苦労したのは、class属性とid属性の使い方、特にclass属性の定義の仕方でした。既出の回答と多々かぶりますが(苦笑)。


 それと、ポイントと思うのはcssは別ファイルに定義するコトです。htmlに直接cssを埋め込んだのでは、cssの旨味は薄まってしまいます。

複数のhtmlを、cssを手直しするだけで、サイト全体をがらっと表示が変えられることが、cssのメリットだと思います。


 以下は、後輩に教える際に使っているサンプルです、後輩の曰く、「具体的に何ができるか」と言うところから入った方が、とっかかり安いとのことで。表組で奇数行と偶数行で背景色を変えるhtml,cssです。

table.html

<!-- 段だら表サンプル -->
<head>
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" href="/css/question.css">
</head>
<body>
<table>
<tr class='odd' ><td>奇数行1<td></tr>
<tr class='even'><td>偶数行2<td></tr>
<tr class='odd' ><td>奇数行3<td></tr>
<tr class='even'><td>偶数行4<td></tr>
<tr class='odd' ><td>奇数行5<td></tr>
<tr class='even'><td>偶数行6<td></tr>
</table>
</boby>

table.css

.odd{     background: #f00;}
.even{    background: #fff;}

(xhtml,cssともに説明用 割愛Ver.です、厳密には書き足しが必要)

 このサンプルでは紅白の表ですが、cssを書き換えれば配色を自由にできます。これがhtmlべた書きでhtmlが複数ある場合、

お客さんに「ちょっと配色変えてよ」と言われると泣きが入りますが、css別定義なら大した手間になりません。



 高度になると、Pukiwikiでは、同じhtmlでパソコン/携帯電話で見せ方をcssで変えるといったコトを実現しています。

また、hatena diaryを始めとしたblogも非常に参考になります。

 http://pukiwiki.sourceforge.jp/



 最後に、英語になりますが、CSSをA4 1枚で一覧で説明している"CSS Cheat Sheet"なるものが公開されています。

プリントアウトを手元に置いておくと、おおよそ何ができるかを見られますし、慣れてからでも「えっと、'アレ'何だったっけ?」といった時(苦笑)、とても便利です。

http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/

 ご参考になれば幸いです。

id:antimok

サイトのデザインを変えるために、その要素を(DIV等で)HTMLに埋め込んでしまうとすると、

なんだかなーっていう気がするんですね。

行による背景色変更のパターンですが、1行~6行のそれぞれに、classでoddか

evenかを指定しますが、この辺りがHTMLにデザインを埋め込んでしまっているという

気がして、悩んでしまうのです。

携帯サイトとPCサイトを使い分けるのはいいですね。

携帯サイトを作るためにほぼ、二重に作業していましたので。

Cheat Sheetも知りませんでした。ありがとうございます。

2008/04/26 22:47:36
  • id:Quphondi
    フォローをば

     私も当初は、antimokさんが抱かれた違和感に同じく悩みました。
    が、結局、cssはそのようにしかできないので、割り切りました(^^;

     cssが定義できるデザインは、大まかには余白(margin/padding)、フォント
    (family,size,weight,color),配色,罫線,重なり合いだけで、これ以外はデザイン
    ではなく、文書構造として決めるモノという割り切り方です(極めておおざっぱですが)。

     表中で当該行が奇数行か偶数行かというのは、実は文書の構造であってデザインではない
    のですが、このようなcss流の考え方(割り切り方(?))が身につけるには、時間を要しますし、
    実践あるのみだと思います。
     

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません