とある本で「HTMLは本来文書構造とその内容のみを記録するもので、視覚的表現を行なうのは好ましくない」とあり、デザインの点についてはCSSに任せるようにとありました。たしかにこれによって文書作成者のデザイナーの仕事に完全に分断できるので便利だとは思うのですが、1つ疑問があります。その2つはどの程度まで分離できるのでしょう?
例えば<b>タグや<font>タグによる文字サイズ・色変更はターゲットを<body>や<p>あるいはそれに設定したクラスにすることによってCSSで代用が可能です。が、例えば「この部分のテキストは色を変えて、他はそのまま」というようにしたい場合、事前にタグやクラスを用意しておかなければなりませんよね?body内にプレーンテキストで書かれたテキストを、途中から部分的に変更を加えたい場合はそのHTMLファイルをいじる必要がありますよね。しかしそれでは役割の分担になっていないのではないでしょうか。
また、テーブルをレイアウトの点で有効ですが、これは逆にCSSでは実現不可能で、HTMLでのみ可能な表現です。これについても仕事の分断になっていないのではないかと思います。
本当にHTMLとCSSの分離によって作業の分断・効率化が図れるのでしょうか?
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
きっちりした本を思い浮かべてください。
タイトルがありますね。
大見出し
中見出し
小見出し
本文ー段落。
ここにあらかじめ、大見出しですよ。中見出しですよ。とマークを付けます。その中には引用・表などが入っているかもしれません。これが、HTMLが担う部分です。
次に大見出しは大きな活字でとか、扉にして1ページ丸まる取るとか、ページ節減のため、3行分程度でそのかわり点滅させるとか見出しにデザインを当てはめます。1冊の本は見出しの格で字の大きさや書体が共通していますね。大見出しはこれ、中見出しはこれ、上か下には柱やノンブル。上下左右はどれくらいあけて。このデザインの部分が、CSSです。
だから、HTMLの部分さえしっかりとしていれば、別ファイルのCSSを変えると、一気にデザインが変わります。HTMLとCSSの分離によって作業の分断・効率化が図れると思います。一ファイルづつ入れていてはこういうことは無理です。効率化を求めれば論理的・構造的なマークアップが求められるのです。
使い方次第ですね。CSSを使ってもコピペ大魔王をいつまでもやっている人もいますので。
No.3
- 回答日時:
htmlとcssの分離は十分可能だと思いますし、そうあるべきだと思います。
私はグラフィックデザインの仕事をしていますが、webサイトに限らず何かをデザインする時に大事なのはそれがどういうものなのか、何を表現したいのかといった情報です。この情報がまとまれば、デザインの7,8割は出来たようなものです。
これをhtmlで言い換えると、大事なのは論理マークアップだということになると思います。文書構造が明確で、きちんと論理的にマークアップされたhtml文書は、7,8割デザインが終わっているのです。それをcssで味付けしてやる。それがデザインだと思います。
htmlとcssの分離がどうしても出来ないとしたら、それはデザインで大事な伝えることではなく、飾ることを重視しているからだと思います。
No.2
- 回答日時:
おそらく、おっしゃっている「分離」とは、ファイルが別々であることをイメージなさっているのだと思います。
しかしCSSの趣旨で言うところの「分離」とは、本来、文書構造を表現するのが目的であるHTMLを、視覚的な表現のために使わない、という意味です。したがって、外部ファイルを使わずに <span style="font-style: bold;">ABC</span> としても良いわけです。これも分離です。
たとえば<span style="font-style: bold;">ここ</span>だけ太字にする。
実際のところ、ごく一部だけを太字にしたり色を変えるだけで、いちいち別ファイルやクラス定義だとかしていたら非常に面倒で、極めて非効率です。
ただ、おっしゃるとおり文書のライターと視覚的なデザイナーの作業を分離させる、ということを考えると、結局は同じファイルを編集することになる、という疑問はあるかもしれません。それに、厳密に言えば上記の例は「間接的にだが、視覚のためにspanタグを使っている」とも言えるかも。
しかし、同時に作業できないことを除けば(といっても普通は同時ではない)、文書の担当は「文書構造だけ」を意識して書けば良い、つまり視覚的な部分、タグの「style」だとかは一切気にしなくて良いし、見出し、段落、などだけを表現すれば良いわけで、一方の視覚デザイナーは視覚的な部分だけに手を加えていけば良い、と言うことになります。
趣旨から言えば、分離できていると思います。
そういう意味では、「HTMLとCSSはどれだけ分離できるのか」の答えは、現在のところ、ほぼ完全に分離できるのではないでしょうか。
ちなみに、
> テーブルをレイアウトの点で有効ですが、これは逆にCSSでは実現不可能で、HTMLでのみ可能な表現です
テーブルをレイアウトのために使ってはいけないとされています。CSSでもたいていは実現可能です。
(しかしテーブルを使ったほうが確実で楽な場合もありますが…)
No.1
- 回答日時:
スタイルシートがなかったような時代の古いHTMLはべつとして、普通のHTMLはbody内にプレーンテキストは書くことはいけないことになっています。
HTMLにプレーンテキストを書くのはbodyではなく最低でもpなどのブロック要素内に書かないといけません。(body内にプレーンテキストを書くなんて書いてある参考書は破り捨てましょう。)
スタイルシートは自動組み版の流し込みルールみたいなものでして、一度スタイルシートを書いておけばクラスの指定だけで簡単にスタイルを変えることができるので楽です。
ブロック要素内にある一部のテキストだけスタイルを変更したい場合はspanタグでクラスを指定してあげればOKです。
少なくとも私が管理しているWebはスタイルシートを使ってます。
回答ありがとうございます。
やはり「この部分は強調してもらおう」ぐらいのことは文書作成者に事前に決めておいてもらわないといけないのでしょうか?それをどう装飾するかをCSSで自由に変えられることは分かるのですが。
結局のところ「CSSの装飾で代用できるものはそうしたほうが良い」ということですか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- その他(IT・Webサービス) ホームページにカウント数を表示する 2 2022/10/28 10:37
- その他(プログラミング・Web制作) WEBアプリ開発に必要な言語 5 2023/06/28 16:57
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- HTML・CSS Chrome のキャッシュについて 3 2022/05/26 07:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ヘッダーを左右に二分割する方...
-
min-heightとheightの違いについて
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
CSSで、contentsがfooterに重な...
-
要素間、要素内に隙間が空く
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
html5でheaderの中にnav
-
ヘッダーとフッターだけ背景を...
-
【CSS】positionの親子関係につ...
-
レスポンシブかつ、スマホ、携...
-
複数のボタンを等間隔に、かつ...
-
<div id="container">の使いか...
-
リストで画像を右に表示したい
-
3カラムレイアウトで「常に残り...
-
div要素が重なってします
-
オシャレな区切り線はありませ...
-
idとclassの指定方法
-
HTMLでのコメントアウト
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
スペースを使わず文字位置を揃...
-
1時間30分を簡単に表したいで...
-
CSSで、contentsがfooterに重な...
-
divの中に外部のHTMLを埋め込む
-
h1に自分自身へのリンクを張...
-
hタグの右横に画像を表示
-
divを横に並べる方法
-
インラインフレームのページ内...
おすすめ情報