クラスとIDの違いは？

Question

CSSでクラスとIDがあると思いますが、違いがさっぱり分かりません。
あるタグA内のタグBに対するIDなどと利用出来るのはわかりますが、
それは全てクラスでも出来ますし、明確な違いが未だ分かりません。

利用する際、何を判断基準にすれば良いのでしょうか？

koutarou504 · Accepted Answer

あの～、たぶん質問者（naktakさん）の発想というか設計思想，知識レベル等からして、全て ＣＬＡＳＳ の概念しかお持ちでないのでしょう。
という事で、ＩＤとＣＬＡＳＳの違い以前にＩＤについて理解というか想い至らないと思いますし、また、質問者さんがＩＤを使う事はないでしょう。というか使ったら間違いかと・・・。

故に、ＣＳＳを除いてＨＴＭＬでまず考えるといっても、その時点ではＳＴＹＬＥ要素もＳＴＹＬＥ属性もスタイルシートの外部ファイルのリンクも、ＣＳＳあっての事で、知った時点で読めば判るが知らないというか一意の名称付けという概念のない人に提示しても・・・。


先にも提示しましたが、ＩＤとＣＬＡＳＳの利用判断基準は、作成者のその指定に対する意識付け次第という事です。赤組のＡ君が赤組だから赤色とするならば赤組というグループだからＣＬＡＳＳを用いるべきだしＡ君だから赤色としたいならばＡ君という１個人を特定すべき，一意にするべきなのでＩＤを用いる。ただそこの赤組のＡ君をどの組の誰とも意識せず単に赤色としたい場合にＳＴＹＬＥ属性を用いる、と・・・。

で、質問者の感覚を推測すると、常に先に赤色にするＣＬＡＳＳがあり、Ｂ君を赤色にしたいと考えた時にＢ君も赤組としようと考えられているというか、赤色の人は赤組・・・。
となると、ＩＤの入る余地はないかと～。


蛇足：ＳＴＹＬＥ属性を用いた場合に、ある特定の指定が出来ません。ＳＴＹＬＥ要素や外部リンクによる読み込みだと指定出来るという事があります。
ＩＤとＣＬＡＳＳが競合した場合は、ＩＤの内容が採用されます。赤組のＡ君がＣＬＡＳＳ赤組は赤色でＩＤでＡ君は青色と指定された場合は、青色となります。
いずれも単純指定には関係ありませんが・・・・・。
使いこなすと便利です。

rsama · Answer

どのブラウザにも対応させたいということなら
やはり同じidを使うのはやめたほうが良いと思います。
同じidがあることでエラーになるブラウザはないとは思いますが、
一応、HTMLの文法的には間違いですので。

http://openlab.ring.gr.jp/k16/htmllint/explain.html#repeated-id

参考URL：http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

goldfox · Answer

＞完全に迷宮入りしてしまいました難しく考えることはありません。混乱するのは「id=""」の使い方を分かっていないせいです。もう一度言いますが、「一度しか使わないからidを使う」のは間違い。「スタイルシートにidを使う」必要はありません。「（すでにある）idにスタイルを指定する」のです。 idが指定されていないページに、わざわざidを使ってスタイルを指定する必要はないです。いずれ、JavaScriptなどでidが指定された要素などのあるページも作られるでしょう。そうなってからidを使ったスタイルの指定法を覚えても遅くはありません。 style=""　これをスタイル属性といいます。ちょっとした変更には便利ですが、この要素にしか使えない、デザインや装飾をまとめて指定するというスタイルシートの概念に外れます。これをとして、スタイルシートで font10{font-size:10pt} と指定しておけば、他の要素にも指定することができるようになり、今はこの要素にしか使わなくても、将来的に大変便利です。

UKY · Answer

私の前の回答、ちゃんと読みました? 参考 URL も四つほど挙げておいたんですけど、読みました?

もう一度いいますが、CSS のことはほっといて、まずは HTML の正しい書き方という観点から考えてください。
HTML の正しい書き方を理解しないと CSS を正しく使いこなすことはできません。

http://homepage2.nifty.com/magicant/techmemo/htmlcsslinks.html

参考URL：http://homepage2.nifty.com/magicant/techmemo/htmlcsslinks.html

UKY · Answer

CSS でスタイル指定できるようにするために HTML に id/class を付ける、と言う考え方では、いつまでたっても id/class の違いは理解できません。
CSS のことは抜きにして、純粋に HTML のより良い書き方は何かと言う観点から考えてみてください。

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1444936&rev=1
http://web.xii.jp/iec/html/memo/id-class
http://www.tg.rim.or.jp/~hexane/ach/awht/awht07.htm
http://deztec.jp/x/01/tips/page/p0045.html

rsama · Answer

No6です CSSは同じid複数合ってもいいんですね。（CSSはclassでしか指定したことなかったんで知りませんでした＾＾；） HTMLは多少仕様外の構文でもブラウザが融通利かせて有効にしてしまうこともありますからねぇ。ですが、CSS以外の部分が絡んでくるとやっかいなことになるので同じidを複数はやめたほうがいいです。（そもそもidの意味がなくなってしまう） >今回の質問で、プログラムでいうとclassはクラス、idはextendsという違いますね＾＾； idとclassに継承関係はありませんからね。 idは個人名 classはグループ名と考えればよいのでは？

S

idで指定→中井さ～ん（「い」が違う）赤くなって。 #nakai { color:red; } classで指定→SMAPの皆さん、大きくなってください .smap { font-size:20pt; } > あんまり気にする所でもないんでしょうかね？まぁCSSだけに関して言えばid指定が特に有用な場面、 idでないといけない場面てのが少ないでしょうから、ほとんどclassで指定でいいと思います。 1つだけ違うスタイルにしたいならstyle要素に直接記述しちゃってもいいわけですし。

koutarou504 · Answer

まず HTML で
ID 属性：この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。
CLASS 属性：この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。

とあり、それだけ診ると ID は不要で CLASS を用いる必要がない、場合によっては ID を用いる選択は不可という場合さえ（同一文書内で同じ指定を複数の箇所に用いたいとか、複数の指定を一箇所に付けたいとか・・・）あり・・・・・。

ただ、HTML として ID 属性はスタイルシートの選択子だけでなく、リンクのアンカーやスクリプトでの特定用とかいろいろ CLASS では出来ない事もあり・・・。
で、既に CSS の識別子以外で ID が用いられていれば、改めて CLASS を用いる必要性もなく・・・。


その上で本筋の CSS。 CSS の識別子として用いる場合の大事な事は、ID は CLASS より優先度が高くなるという事。
同じ要素に ID と CLASS が両方指定されていて、しかも指定内容が競合する場合は ID の指定が採用されます。
また CSS の指定方法には直接 ID, CLASS に個別に指定するだけでなく、組み合わせでいろいろな指定方法があります。そうなると優先度の影響は大きく・・・。


＞利用する際、何を判断基準にすれば良いのでしょうか？
意図が何か。一意の名付けなら当然 ID だし、あるグループのひとつである事の明示なだけなら CLASS でしょう。
とは言っても、BODY 要素に CLASS 属性を付けるのは余程の必要性（複数の CLASS を指定したいとか）でなければ不自然だろうし・・・。なにせ BODY 要素はそもそも文書内で１つしかないはずだから、一意のはず・・・。
ソースの流用を考えた場合に、指定内容の優先度をどうするかとか・・・。JavaScript と組み合わせるとさらに・・・・・。

結局、作成者の能力と決め事次第かと・・・。
なにせ個別の指定にしか用いていなければ、優先度なんて関係ないし・・・。

参考URL：http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html

goldfox · Answer

＞href="./#test"　の#testは「id名」ではないです。
すみません。この点、ページ内リンクでIDを呼び出す（移動する）ことも可能なのを思い出しました。
そういう意味では、#testは「id名」であるともいえます。

cssに限って言うなら、No.6さんのいうように、IDは使う必要がないですね。

rsama · Answer

同じidは1個しかあってはいけないことになってます。
2つ以上同じIDがあるとエラーとなるので初めの1個目以外のidは無効になります。
必ず1つしかない（ことになってる）ので
どの部位をコントロールするか明確にしないとならないJavascriptなどでは
よくidを指定して使用します。
CSSに限って言えばidを使うメリットはあまりないですね。

class要素はCSS専用っぽいところはありますが、id要素はCSS以外に使われることが多いように思います。

goldfox · Answer

＞ID自体は1ページ内で何度も使えるんですよね？＞動作はするみたいですが・・・。＞何度も設定する事が出来ない？？＞cssファイルでID(A)を設定していて、 IDと要素名は別物です。上手く説明できるか分かりませんが…… idはいうなれば「固有名詞」です。

あいうえお

「title」という識別子を割り当てた「h」要素です。 titleという名前の付いた要素に対し、cssで指定ができます。 #title{color:#0000ff;}/* id指定。文字色青 */ 文字色青のIDをh要素につける、のではなく、 id="title"が付いているh要素の文字色を青くする、と考えます。 id（識別子）はJavaScriptなどにも使いますね。同じIDが複数あると、JavaScriptではエラーになります。

あいうえお

「titleという定義付け」したcssを「h」要素に関連付けています。 .title{color:#ff0000;}/* class指定。文字色赤 */ 文字色赤に定義付けたクラスセレクタ（title）を、 class=""で呼び出す、という感じです。 bbb の「name=""」は「name属性」であって、ID（属性）ではないです。 href="./#test"　の#testは「id名」ではないです。

クラスとIDの違いは？

どのブラウザにも対応させたいということなら

この回答への補足

＞完全に迷宮入りしてしまいました

あの～、たぶん質問者（naktakさん）の発想というか設計思想，知識レベル等からして、全て ＣＬＡＳＳ の概念しかお持ちでないのでしょう。

私の前の回答、ちゃんと読みました? 参考 URL も四つほど挙げておいたんですけど、読みました?

CSS でスタイル指定できるようにするために HTML に id/class を付ける、と言う考え方では、いつまでたっても id/class の違いは理解できません。

No6です

まず HTML で

＞href="./#test" の#testは「id名」ではないです。

同じidは1個しかあってはいけないことになってます。

＞ID自体は1ページ内で何度も使えるんですよね？

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

あの～、たぶん質問者（naktakさん）の発想というか設計思想，知識レベル等からして、全てＣＬＡＳＳの概念しかお持ちでないのでしょう。

＞href="./#test"　の#testは「id名」ではないです。