スタイルシートでかけるものはスタイルシートを使った

質問

非推奨タグでなくても、スタイルシートでかけるものはスタイルシートを使ったほうが良い？

htmlでサイトを作ってるのですが、スタイルシートを使うべきかｈｔｍｌで書くべきか、
どちらでもかける場合があります。

その際どちらを使ったほうがいいのでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

判断は、「どちらでもかける場合があります」ではありませんよ。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」という根本を理解していないと、この質問になります。
　HTMLは、あくまで文書構造をマークアップするものです。例えば、太字で表示したい語句があったとします。
[例文]
　「構造とプレゼンテーションの分離」という概念を理解しておかなければなりません。
　いにしえの昔の武士の侍が、馬から落ちて落馬して、・・・【中略】・・・腹を切って切腹した。

　ここで、「構造とプレゼンテーションの分離」が重要なのでしたら
<p>
　<strong>「構造とプレゼンテーションの分離」</strong>という概念を理解しておかなければなりません
</p>
でしょうし
<p>
　<b>いにしえ</b>の<b>昔</b>の<b>武士</b>の<b>侍が、<b>馬から落ちて</b><b>落馬</b>して、・・・【中略】・・・<b>腹を切って</b><b>切腹</b>した。
</p>
　でしょう。

　その上で、スタイルシートで
p strong{color:red;font-weight:normal;}
p b{color:green;font-weight:normal;text-decoration:underline;}
とか・・
　しかし、すくなくとも
<p>
　<span class="stong">「構造とプレゼンテーションの分離」</span>という概念を理解しておかなければなりません
</p>
とかいて
p span.strong{font-weight:bold;color:red;}
とするのは、望ましくはありません。

　もっと、良く指摘されるのが、配置をtableを使って行うことです。tableは、二次元以上のデータをマークアップするものですが、これを他の用途に使うのは誤りです。

　それぞれのタグの用途は仕様書に書かれています。
　⇒要素索引( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html )
　から要素名をクリックして説明を読んでください。

＞その際どちらを使ったほうがいいのでしょうか？
　それは、その要素が何であるかがわからないので、一概には答えられません。--これもわかると思います。
　HTMLは、その文書を読み解き、その文書を構成する要素に分解して、それぞれの要素をタグでマークアップしていく言語です。文書を書く本人しか、その要素(部品)をどの要素とは判断できないのです。
　そのうえで、スタイルシートで自由にプレゼンテーションを変更できる。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
と考えたら答えは出ると思います。

(注)HTML4.01では、この文書構造を示すタグ--要素が足りませんでした。そのため、DIV,SAPNという要素が用意されて
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　とされていましたが、ご存知の通りこれが正しく理解されずに<div id="wrapper"><div id="contener"><div id="Left">のようなおかしなマークアップが氾濫してしまいました。本来は、<div class="article"><div class="section"><div class="nav">のようになるはずでした。
　その反省から、「HTML5 では、文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」header,section,footerなどの新しい要素が採用され、DIVやSPANは原則使わない--他に適当な要素がないときの最後の手段となりました。

＞その際どちらを使ったほうがいいのでしょうか？
　これで悩むことがありませんよう、役立てば良いです。
　1度仕様書を通しで読んでみましょう。答えはそこにあります。

お礼

ありがとうございました。