セレクタでidは使わない？

締切済

質問者：343571
質問日時：2012/04/03 18:24
回答数：2件

http://coliss.com/articles/build-websites/operat …
のサイトで、
「セレクタでidは使わない
セレクタでの指定にはidではなくclassを使用するようにします。
idは再利用しにくいです。」
と書いてあるのですが、IDは使わず、全てCLASSにするといいということでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2012/04/04 00:40

そもそも、classやidの目的は、まず

7.5.2 要素識別子: id属性とclass属性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
7.5.4要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
を読んでください。
特に
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
の意味をしっかり理解してください。
　ここで、文書に構造を負荷するという意味は、HTML5の
『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』
　に書かれている内容を読むと、class名やidには、HTMLの要素だけでは足りない文書構造を示すために利用することが順当でしょう。すなわち
<body>
　<div class="header">
　　・・・文書のヘッダ・・・
　</div>
　<div class="section">
　　<div class="section">
　　</div>
　　<div class="article">
　　　<div class="header">
　　　</div>
　　　<div class="section">
　　　</div>
　　</div>
　</div>
　</div class="footer">
　</div>
</body>
　のように使うことが想定されていることが想像できると思います。

　一方スタイルシートは、文書構造を元に書いていきますから、
div.section{margin-left:0.95em;}とすれば、文書が節→章→項のような構成でしたら、文字が5%ずつ小さくなっていきますね。・・・わかりにくいですが、文書構造を示すためには、class名のほうが便利が良い--HTML5においてもheader,section,footer,figure,article,aside,memo・・などはひとつの文書に何度でも登場する可能性がある=HTML4にも存在した他の要素--p,hn,strongなどと同じです。それは、idが一度しか存在し得ない事と根本的に異なります。

　また、idはa要素のname属性と同様に文書にとって一意ですから、主にページ内アンカーやjavascriptのターゲットとして利用しますから、一箇所しか指定できませんが、それ以上に詳細度がb=1と高いため、class名での指定(詳細度C=1)で上書きしにくくなります。

　他にも様々に理由がありますが、端的に言うと「HTMLは文書構造をマークアップするもの、スタイルシートは文書のプレゼンテーションを指定するもの」ですから、HTMLには文書構造を示すためにclass名で補完されていて、idはターゲットとして書かれているはずです。それを利用してスタイルシートを記述していく。言い換えればスタイルシートのためにidやclass名を書くことはない。
　それが、セレクタにclass名を使う一番の理由かもしれません。

　具体的には、
div.section div.note{font-size:0.9em;color:red;}
と書かれていれば、本文中のノート(注意書き)は赤字だと、HTML見なくても簡単に理解できますから後での修正も楽です。
div.header div.nav{position:absolute;top:100px;left:10px;width:200px;}
div.footer div.nav ul{position:absolute;top:0;left:0;width:100%;}
div.footer div.nav ul li{float:left;}
div.nav ul{display:block;list-style:none;margin:0;padding:0;text-align:center;}
の区別も容易につきますよね。

　私もスタイルシートでidを利用することは、まったくと言ってよいほどありません。