【CSS】div や span でクラスやIDを使わない

質問

簡潔に質問させていただきます。

div や span でスタイルを適用する際、
不要であればクラスやIDを省くことは文法として間違っていますか？
要は、<div>テキスト</div>　<span>テキスト</div> これだけです。
(スタイルは親要素＆セレクタで指定しています)

単なる要素として考えれば問題ないと思いますが、
そもそも単体では意味の無い要素なのでどうなのでしょうか。

尚、ブラウザ(IEとFireFox)では問題なく適用されてました。
色々情報を検索しましたが良い結果が得られませんでしたので、
ご存知の方、ご教授お願いいたします。

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

<div>や<span>それ自体に意味がないというわけではなく、
「ここからここまでが１つの固まり（ブロック＝説、項、段落など）」という意味です。
ただ、<div><span>だけでは「何のための」固まりなのかというのが不明ですので、idやclassなどで指定することで、ただの固まりではない、特別な意味を持った固まりになると、私は思います。

> 不要であればクラスやIDを省くことは文法として間違っていますか？

文法上は間違っていません。
むしろ、省いた方がすっきりすると思いますし、
文字数＝ファイルサイズが減らせるためネットワークにも優しい（通信負荷を減らせる）と思います。

もちろん「何番目のdiv」でスタイルシートは作れますが、
「何番目」では何のためのdivかわかりづらく、
複数のページで１つのcssファイルを使用している場合、ページ毎に「何番目」が変わることがあるため、
私はこの作り方は推奨しません。

というわけで、個別にidやclassを付けて、「何のため」にdivやspanで区切ったのか、というのを明記する方が良いと思います。
が、スタイルシートが目的ではありませんから、idやclassが使われているからと言ってスタイルシートで使用するわけではありませんし、
「何のためのdivかを明記するためのidやclass」という作り方をしているのはむしろ少数派、
属性を付けない方がすっきりする、ファイルサイズを減らせると言うことで、idやclassを付けない方法を推奨される方の方が多いと思います。

ちなみに、HTML4/XHTMLの次の企画であるHTML5では、
今までのHTML4やXHTMLで<div id="header"> <div id="menu"> <div id="footer">
などと作っていた物が
<header> <aside>（または<nav><menu>など） <footer>
というようにタグ名に格上げ（？）されていますので、idやclassで区別するのではなく、タグ名で区別できるようになります。（そのかわり、タグの種類が相当増えます。）

<span>についてですが、キーワード（単語）だけであれば、<b>や<i>を推奨します。
ほとんどの解説サイトに「太字にする」「斜体にする」という説明があると思いますが、
本来のHTMLでは、「強調するわけではないが、ページ内のキーワードとなる」という意味のタグだと思います。

その根拠ですが、HTML4/XHTMLの仕様書には<b>や<i>の説明が書かれていませんが、HTML5に上記のように「ドキュメント内のキーワードに使用する」という説明があります。
現に英語サイトでは、「『ページ内の主要単語』という目印」を付けたら「結果的に太字になってしまった」という感じの使われ方のようです。

<span>を使うのは、文章や熟語など、キーワードと言うには長い部分に使うのが良いと思います。

<b>や<i>を使用し、<span>と区別するのも、私個人的なものです。
これは（日本の）殆どの解説サイトの推奨に反した方法ですから、
大多数が推奨される方法に合わせるのでしたら、<b>や<i>を使わない方が良いと思います。

お礼

ご回答、ありがとうございます。

理屈で考えると問題ないのは分かっていたんですが、
色々なサイトでソースを見ても、そういった使い方をしているサイトが無く自信が持てず質問させていただきました。

皆さまにご回答いただけた結果、自信を持って<div><span>要素のみで使用することが出来ます。

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

回答No.2

naokita

間違いではありませんし、問題なく表示されます。お好きなように。
<span>だけで利用する場面は、同エリアで繰り返し利用するような時しかあまり使いませんが。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

p#news .namae{font-weight: bold; color: maroon;}

<div>
<p id="news">
aaaa<span class="namae">AAA</span>bbb<br />
ccc<span class="namae">CCC</span>ddd<br />
<span class="namae">DDD</span>eeeeeeee
</p>
</div>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

p#news span{font-weight: bold; color: maroon;}

<div>
<p id="news">
aaaa<span>AAA</span>bbb<br />
ccc<span>CCC</span>ddd<br />
<span>DDD</span>eeeeeeee
</p>
</div>

お礼

ご回答、ありがとうございます。

理屈で考えると問題ないのは分かっていたんですが、
色々なサイトでソースを見ても、そういった使い方をしているサイトが無く自信が持てず質問させていただきました。

皆さまにご回答いただけた結果、自信を持って<div><span>要素のみで使用することが出来ます。

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

回答No.1

torayoshi

私CSSの専門家ではないので、あくまで個人的な解釈になりますが…

そもそもCSSにおいて「classやidによる定義化は必須」は明記されてません。
<div>だけでもW3CのCSSチェッカーで合格をもらえます。
この事は逆に、では何故classやidによる定義化が必要になって来るのか。
を考えれば、自ずと答えは見えてくると思います。
肝心なのは、「どの要素に対してスタイルを適用させたいか」
だと思います。
例えは、
p { font-size:12px; }
とした場合、classやidはいらないですね？
ところが、
p.ao { font-size:12px; color:blue; }
などのように、一部の段落を青色にしたい場合、青色に対する要素がありません。
この時初めてclassやid(一意セレクタ)による局所化、細分化が必要になって来ます。
このようにセレクタ名が明示的(型セレクタ)でかつ、(親)、子、孫セレクタが存在しない場合、
(当たり前ですが ^^;)
グループ化のみで、classやidによる局所化が不要である事は容易に理解出来るのではないでしょうか。

単体では意味のない要素でも、使い方でブロックレベル、インライン要素(グループ化)という明確な意味を持つ要素でもあります。

お礼

ご回答、ありがとうございます。

理屈で考えると問題ないのは分かっていたんですが、
色々なサイトでソースを見ても、そういった使い方をしているサイトが無く自信が持てず質問させていただきました。

皆さまにご回答いただけた結果、自信を持って<div><span>要素のみで使用することが出来ます。

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