- ベストアンサー
idとclassの指定方法
id(class)の指定は、セレクタといっしょに指定（１）、セレクタを除いて指定(２) どちらが正しいというのはあるのでしょうか？ 【例】 <html> <head> <title>タイトル</title> </head> <body> <div id="sample"> <p>サンプル</p> </div> </body> </html> (1) div#sample p { color:#f00; } (2) #sample p { color:#f00; } どちらでも良いような気がしますが、実際の所どうなんでしょうか。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ほかのHTML内に「div以外のid="sample"」が出現することが100%無いとは言えませんよね？ それを踏まえるとdivから書く「ほうがいい」ということが明らかにわかると思います。 余談ですが私は「div以外のid="sample"が出現することが100%無い」ようにHTMLを書くほうが自分には楽なのでタグ名からは書きません(笑)タグ名での指定、IDでの指定、クラス名での指定のみを使用しています。 ＞そうなんですか？色々なサイトや参考書では一意に特定する場所には ＞idを指定するとの解説を見かけるんですがこれは間違いなんでしょうか？ これはHTML側の都合で、同一のHTMLファイル内に同じIDが重複してはいけないということからの派生の考えですね。これも、上記と同じく、「そういうふうに(一意に特定する場所にはclassではなくidを指定)したほうがいい」のは明らかですが、あとは仕様に反していなければいい、ということになります。 なお、表現で分かっていただけるとは思いますが以上はあくまで現実問題での話です。質問者さんが仕様ガッチガチでいきたいのなら、上記のような「現実を踏まえた、文法違反だけはしていない」記述よりも、仕様を読んでそれに厳密に従う書き方をすべきです。
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞つまりこれはidを使ってしまうと、idが違うだけで同じスタイル複数書いてしまう 事になるよってことですよね。確かにそうですね。 たくさん作成していると、こういう細かいところも随分と賢くなりましてね。 IDは、<a href="WHAT_IS_HTML">とかに残しておいて、classをうまく使って、適用させたい要素を指定するほうが便利なのです。<div class="header" id="WHAT_IS_HTML">あるいは、<div class="header" id="TOP"> classの値は、「半角スペースで区切っていくつでも書ける」という特性がありますし、詳細度が高くすればいくらでも上書きさせられる。 私は、HTML内のあるブロックのスタイルがスクロールなしですべて理解できるように短くまとめるようにしています。でないと、CSSがどんどん肥大化して後で修正するときに地獄になります。そのためには、idよりclassのほうが本当に楽です。 いずれにしても、大事なことはスタイルシートではなくHTMLのマークアップです。それさえきちんと出来ていれば、 div.header div.abstract{margin:0 1em;border:solid 1px solid;} div.section div.tableContent{position:absolute;left:0;top:0;width20%} とCSSを書くことが出来ます。これだと誰(数年後の自分)が見ても何をしようとしてるかわかるでしょう。 #left{position:absolute;left:0;top:0;width20%} じゃ、HTMLを開かなくちゃならない。・・・すこし本題と外れますが・・・ <div id="header">じゃなく<div class="header">をつかうもうひとつの理由は、将来HTML5に変更するとき、<div class="header">→<header>、<div class="section">→<section>とするほうが、楽だからです。 div.header{}と書かれているスタイルシートを div.header,header{}と変更すれば、スタイルシートが流用できますからね。実を言うとすでに、そう書いている。(HTML5のページはないですが)
お礼
回答ありがとうございます。 ＞CSSがどんどん肥大化して後で修正するときに地獄になります。そのためには、idよりclassのほうが本当に楽です。 たぶんORUKA1951さんの場合、ある程度の規模が大きくなる事を前提に考えているので 修正のことも考えるとclassの方が楽だよって事ですよね。 私の場合は規模が大きなサイトを想定していない為、idでもclassでも そんなに変わらないと思ってしまうのが正直なところです。 その為、div id="header"としても後々のデメリットがあまり感じません。 ＞将来HTML5に変更するとき、<div class="header">→<header>、<div class="section">→<section>とするほうが、楽だからです。 html5だとheaderを複数使っても問題ないんですよね。 その事を考えると一意に特定できる要素としてheaderを使うより、html5でのheaderタグを 想定してclass="header"とした方が後々の修正が楽になるって事ですね。 つまり、id="header"として任意のブロックとするか、class="header"としてhtml5前提のheaderとして使うかの違いでしょうか。 ORUKA1951さんの回答を見ているとスタイルをidで指定できること自体、不要のように思えますね。。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 ＞この場合、上部（header）も、サイドバー（sidebar）も、1ページ中に2度以上登場することはありません。 かならず1度だけです。 このような場合に、idを使います。 そんなことはありません。HTML5の仕様書を見ればわかるように、headerもfooterも何度も登場して構いません。 headerとは完結した記事のヘッダー、footerはフッタですから・ 例] 4.4.9 The footer element( http://www.w3.org/TR/html5/sections.html#the-footer-element ) <div class="header" id="TOP"> <h1>見出し</h1> <div class="nav"> <h2>リンク</h2> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </div> <div class="section" id="What_is_HTML"> <h2>本文</h2> <p>段落</p> <div class="article"> <div class="header"> <h2>見出し</h2> </div> <div class="sectin"> 記事 </div> </div> <div class="section"> </div> </div> <div class="footer"> </div> </body> とか・・・ 私がidをスタイルの指定に使わない理由はいくつかあります。 ・IDはリンクターゲットとして使うため、 <div class="section" id="What_is_HTML"> </div> <div class="section" id="HOW_to_HTML"> </div> のとき、困るでしょう。目次のソースを編集するとき具体的にその内容がわかるIDをつけたほうがよいのです。 <li><a href="#What_is_HTML"></a>HTMLとは</li> <li><a href="#HOW_to_HTML">HTMLの書き方</a></li> と書くでしょ？ <div class="header"> <div class="nav"></div> </div> <div class="section"> <div class="nav"> のとき、 div.header div.nav{} div.section div.nav{} で区別できます。 もちろん サイドバー sidebar <div id="sidebar">～</div> 本文領域 main <div id="main">～</div> という意味のない書き方もしません。デザインのためにclass名やidをつけることはありません。idやclass名は 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 と仕様書に書かれています。HTML4では、これ以上の明確な例はありませんでした。 ナビゲーション <div class="nav">～</div> 本文領域 <div class="section">～</div> ・・・HTML5だと、それを明確に ナビゲーション <nav></nav> 本文 <section></section> となります。3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )が良い参考になるでしょう。 ＞>その変わり、特定の部分のデザインを変えたいときがあれば、そのHTMLの<head></head>内に書きます。 ほとんどないのですが、多くのページでセットになっている場合、特定のページのみに適用させるスタイルは、共用のスタイルシートに書くと煩雑になり後日のメンテナンスが悪くなるので、head内(HTML)、あるいは<link>(XHTML)で追記しています。この場合は#を使うことが多いですね。 ・idでは、詳細度が高すぎます。 idでは、詳細度がb=2となり、なかなか上書きがしにくくなります。 私のページの作り方にも一因はあるのですが、多くのページで構成される場合、最初にすべてのページをひとつにまとめたものを作成し、それを利用しやすいようなサイズに分割して一連のページを作ることが多いです。全体のデザインを統一し、スタイルシートを簡素化する目的もあります。その場合、必然的に一箇所だけスタイルを指定しなければならない必然性はなくなります。大きなページは、ページ数や目次を印刷するように印刷用スタイルシートを設定して残しておきます。 [例]書きにくいのでHTML5で書きます <body> <article> <header></header> <section> <section> <section></section> </section> <section> <section></section> </section> </section> <footer></footer> </article> <article> <header></header> <section> <section> <section></section> </section> <section> <section></section> </section> </section> <footer></footer> </article> </body> ↓分割 <body> <article> <header></header> <section> <section> <section></section> </section> <section> <section></section> </section> </section> <footer></footer> </article> </body> この場合、idではデザインできないことが理解いただけるかな？ ★いずれにしてもIDは出来るだけ内容がわかるものにすると一意な物になりますが、デザインは共用したいとなると、IDよりclassのほうが適している。 一箇所しか登場しなくてもclass名で用が足りるならclassを使う。classには、リストが使えるという利点があります。属性セレクタ[class~=""}と同じ意味を持つので・・ <div class="section"> <div class="section memo imporatnt"> div.section{margin:0 auto;width:70%;border:solid 1px gray;} div.section div.section{width:100%;margin:0;} div.important{border-color:red;} div.section.memo{color:green;} とか、classを使うと、圧倒的にプロパティを書く量を減らせます。IDを使うとき結構他と共通な設定を書いてますよ。 classをうまく使うと、本当にスタイルシートは小さくなります。そしてわかりやすくなる。
お礼
何度も回答いただきありがとうございます。 ＞そんなことはありません。HTML5の仕様書を見ればわかるように、headerもfooterも何度も登場して構いません。 なるほど。HTML5の仕様書ではheaderもfooterも何度登場しても問題ないのですね。 勉強になりました。 ただ、「この場合、上部（header）も、サイドバー（sidebar）も、1ページ中に2度以上登場することはありません。 かならず1度だけです。 このような場合に、idを使います。」 というのはあくまで一ページ上で一度しか登場しないブロックの事で、ORUKA1951さんの言うような「headerとは完結した記事のヘッダー、footerはフッタですから・」とはなんとなく意味が違うような気がします。 参考urlの解説がHTML5の事を対象にしていない事もありますが・・ なんていうですかね。html5のタグとしてのheaderではなく、ページ上での唯一の ブロックとしてのheaderという感じでしょうか。うまい表現ができなくて申し訳ありません。 ＞classを使うと、圧倒的にプロパティを書く量を減らせます。IDを使うとき結構他と共通な設定を書いてますよ。 つまりこれはidを使ってしまうと、idが違うだけで同じスタイル複数書いてしまう 事になるよってことですよね。確かにそうですね。 詳しく解説していただきありがとうございました。
- Tacosan
- ベストアンサー率23% (3656/15482)
CSS の「{」の前にあるのがセレクタだから, 「セレクタといっしょに指定」とか「セレクタを除いて指定」というのは全く持って意味不明. さらにいえば, 「正しい」というのがいかなる価値基準におけるものなのかも不明. id に対しては, その CSS を他のファイルと共用するならタグをつける必要性もあるかもしれません. 共用しなければ, タグは完全に冗長なだけです. class なら CSS を他のファイルと共用するかどうかにかかわらずタグをつける意味はあります. ただし, そんなことするくらいなら別のクラスにしろという意見もあり得る.
お礼
＞CSS の「{」の前にあるのがセレクタだから, ～全く持って意味不明 間違いを指摘していただきありがとうございます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
意味が違いますから、必要に応じて使い分けます。 CSS1は、.classNameと言う書き方でしたが、CSS2以降は基点となるセレクタを最初に書きますから*.classNameが本来の書き方です。*は詳細度0とします。 CSS2では、基点となる*が省略することができるとされていますから 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree. If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example: ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Selectors( http://www.w3.org/TR/CSS2/selector.html )］より 私は紛らわしくなる--他のセレクタの書き方と統一するため*は書いています。 div.nav *{display:block;} とかもあるので、 意味は、class属性の値が半角スペースで区切られて配列であるとき、そのひとつににclassNameの値を持つ、すべての要素と言う意味になります。クラスセレクタは詳細度c=1,IDセレクタは詳細度b=1になります。 div.section div.section ol li.abc{}は、詳細度0,0,2,4になります。 #、すなわちID(一意)セレクタの場合は、詳細度がb=1で、適用されるHTMLがひとつの場合は問題になりませんが、複数ある場合は必要に応じて書きます。 ただ、#(一意)セレクタは、スタイルシートであまり使う機会のないセレクタだと思います。--私もまず使いません-- もし、タイプセレクタを前につければ、同じIDが異なるページで使用されているときぐらいでしょう。 [HTML1] ・・・ <div class="section" id="section1"> <h1>見出し</h1> [HTML2] ・・・ <div class="article" id="section1"> <h1>見出し</h1> とか、ですか？ ★HTMLがきちんと書かれていれば、IDをスタイルシートで使用する機会は少ないでしようね。 その変わり、特定の部分のデザインを変えたいときがあれば、そのHTMLの<head></head>内に書きます。 ★class名は、必ず書きます。そのほうが後から見てわかりやすい。 div.memo{font-size:0.9em;border:solid 1px gray;}/* 詳細度0,0,1,1 */ div.section div.memo{margin:1ex 1em;border-color:blue;}/* 詳細度 0,0,2,2 */ div.annotation div.memo{margin:0.5ex 0.5em;border-style:dotted;}/* 詳細度 0,0,2,2 */ (1) div#sample p { color:blue; } (2) #sample p { color:red; } の場合、いずれの色になりますか？？？青ですね。
お礼
＞ただ、#(一意)セレクタは、スタイルシートであまり使う機会のないセレクタだと思います。--私もまず使いません-- そうなんですか？色々なサイトや参考書では一意に特定する場所には idを指定するとの解説を見かけるんですがこれは間違いなんでしょうか？ http://allabout.co.jp/gm/gc/23897/2/ >その変わり、特定の部分のデザインを変えたいときがあれば、そのHTMLの<head></head>内に書きます。 これはheadに<style>を用いて直接、スタイルを記述するということですか？ 補足お願いしたします。
お礼
回答ありがとうございます。 ＞ほかのHTML内に「div以外のid="sample"」が出現することが100%無いとは言えませんよね？それを踏まえるとdivから書く「ほうがいい」ということが明らかにわかると思います。 確かに…ページによっては#logoなどをh1だったり、pに使ったりしていました。。div id="sample"のみに指定するならdivから書くほうがいいですよね。 ＞質問者さんが仕様ガッチガチでいきたいのなら、上記のような「現実を踏まえた、文法違反だけはしていない」記述よりも、仕様を読んでそれに厳密に従う書き方をすべきです。 なるほど！この言葉ですっきりしました。 仕様書を厳密に守ろうとすればORUKA1951さんのような書き方をすべきであり、文法違反 さえしなければいいというのであれば「一意に特定する場所にはclassではなくidを指定したほうがいい」という書き方をすればよいのですね。 勉強になりました。ありがとうございます。