- 締切済み
HTMLとCSSはどれだけ分離できるのか。
とある本で「HTMLは本来文書構造とその内容のみを記録するもので、視覚的表現を行なうのは好ましくない」とあり、デザインの点についてはCSSに任せるようにとありました。たしかにこれによって文書作成者のデザイナーの仕事に完全に分断できるので便利だとは思うのですが、１つ疑問があります。その2つはどの程度まで分離できるのでしょう？ 例えば<b>タグや<font>タグによる文字サイズ・色変更はターゲットを<body>や<p>あるいはそれに設定したクラスにすることによってCSSで代用が可能です。が、例えば「この部分のテキストは色を変えて、他はそのまま」というようにしたい場合、事前にタグやクラスを用意しておかなければなりませんよね？body内にプレーンテキストで書かれたテキストを、途中から部分的に変更を加えたい場合はそのHTMLファイルをいじる必要がありますよね。しかしそれでは役割の分担になっていないのではないでしょうか。 また、テーブルをレイアウトの点で有効ですが、これは逆にCSSでは実現不可能で、HTMLでのみ可能な表現です。これについても仕事の分断になっていないのではないかと思います。 本当にHTMLとCSSの分離によって作業の分断・効率化が図れるのでしょうか？
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ICHI-yan
- ベストアンサー率33% (45/134)
きっちりした本を思い浮かべてください。 タイトルがありますね。 大見出し 中見出し 小見出し 本文ー段落。 ここにあらかじめ、大見出しですよ。中見出しですよ。とマークを付けます。その中には引用・表などが入っているかもしれません。これが、HTMLが担う部分です。 次に大見出しは大きな活字でとか、扉にして１ページ丸まる取るとか、ページ節減のため、３行分程度でそのかわり点滅させるとか見出しにデザインを当てはめます。１冊の本は見出しの格で字の大きさや書体が共通していますね。大見出しはこれ、中見出しはこれ、上か下には柱やノンブル。上下左右はどれくらいあけて。このデザインの部分が、CSSです。 だから、HTMLの部分さえしっかりとしていれば、別ファイルのCSSを変えると、一気にデザインが変わります。HTMLとCSSの分離によって作業の分断・効率化が図れると思います。一ファイルづつ入れていてはこういうことは無理です。効率化を求めれば論理的・構造的なマークアップが求められるのです。 使い方次第ですね。CSSを使ってもコピペ大魔王をいつまでもやっている人もいますので。
htmlとcssの分離は十分可能だと思いますし、そうあるべきだと思います。 私はグラフィックデザインの仕事をしていますが、webサイトに限らず何かをデザインする時に大事なのはそれがどういうものなのか、何を表現したいのかといった情報です。この情報がまとまれば、デザインの7,8割は出来たようなものです。 これをhtmlで言い換えると、大事なのは論理マークアップだということになると思います。文書構造が明確で、きちんと論理的にマークアップされたhtml文書は、7,8割デザインが終わっているのです。それをcssで味付けしてやる。それがデザインだと思います。 htmlとcssの分離がどうしても出来ないとしたら、それはデザインで大事な伝えることではなく、飾ることを重視しているからだと思います。
- taseki
- ベストアンサー率66% (155/233)
おそらく、おっしゃっている「分離」とは、ファイルが別々であることをイメージなさっているのだと思います。 しかしCSSの趣旨で言うところの「分離」とは、本来、文書構造を表現するのが目的であるHTMLを、視覚的な表現のために使わない、という意味です。したがって、外部ファイルを使わずに <span style="font-style: bold;">ABC</span> としても良いわけです。これも分離です。 たとえば<span style="font-style: bold;">ここ</span>だけ太字にする。 実際のところ、ごく一部だけを太字にしたり色を変えるだけで、いちいち別ファイルやクラス定義だとかしていたら非常に面倒で、極めて非効率です。 ただ、おっしゃるとおり文書のライターと視覚的なデザイナーの作業を分離させる、ということを考えると、結局は同じファイルを編集することになる、という疑問はあるかもしれません。それに、厳密に言えば上記の例は「間接的にだが、視覚のためにspanタグを使っている」とも言えるかも。 しかし、同時に作業できないことを除けば（といっても普通は同時ではない）、文書の担当は「文書構造だけ」を意識して書けば良い、つまり視覚的な部分、タグの「style」だとかは一切気にしなくて良いし、見出し、段落、などだけを表現すれば良いわけで、一方の視覚デザイナーは視覚的な部分だけに手を加えていけば良い、と言うことになります。 趣旨から言えば、分離できていると思います。 そういう意味では、「HTMLとCSSはどれだけ分離できるのか」の答えは、現在のところ、ほぼ完全に分離できるのではないでしょうか。 ちなみに、 > テーブルをレイアウトの点で有効ですが、これは逆にCSSでは実現不可能で、HTMLでのみ可能な表現です テーブルをレイアウトのために使ってはいけないとされています。CSSでもたいていは実現可能です。 （しかしテーブルを使ったほうが確実で楽な場合もありますが…）
スタイルシートがなかったような時代の古いＨＴＭＬはべつとして、普通のＨＴＭＬはbody内にプレーンテキストは書くことはいけないことになっています。 ＨＴＭＬにプレーンテキストを書くのはbodyではなく最低でもpなどのブロック要素内に書かないといけません。（body内にプレーンテキストを書くなんて書いてある参考書は破り捨てましょう。） スタイルシートは自動組み版の流し込みルールみたいなものでして、一度スタイルシートを書いておけばクラスの指定だけで簡単にスタイルを変えることができるので楽です。 ブロック要素内にある一部のテキストだけスタイルを変更したい場合はspanタグでクラスを指定してあげればＯＫです。 少なくとも私が管理しているＷｅｂはスタイルシートを使ってます。
お礼
回答ありがとうございます。 やはり「この部分は強調してもらおう」ぐらいのことは文書作成者に事前に決めておいてもらわないといけないのでしょうか？それをどう装飾するかをCSSで自由に変えられることは分かるのですが。 結局のところ「CSSの装飾で代用できるものはそうしたほうが良い」ということですか？