クラスとIDの違いは？

質問

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

利用する際、何を判断基準にすれば良いのでしょうか？

回答No.12

koutarou504 · ベストアンサー

あの～、たぶん質問者（naktakさん）の発想というか設計思想，知識レベル等からして、全て ＣＬＡＳＳ の概念しかお持ちでないのでしょう。
という事で、ＩＤとＣＬＡＳＳの違い以前にＩＤについて理解というか想い至らないと思いますし、また、質問者さんがＩＤを使う事はないでしょう。というか使ったら間違いかと・・・。

故に、ＣＳＳを除いてＨＴＭＬでまず考えるといっても、その時点ではＳＴＹＬＥ要素もＳＴＹＬＥ属性もスタイルシートの外部ファイルのリンクも、ＣＳＳあっての事で、知った時点で読めば判るが知らないというか一意の名称付けという概念のない人に提示しても・・・。

先にも提示しましたが、ＩＤとＣＬＡＳＳの利用判断基準は、作成者のその指定に対する意識付け次第という事です。赤組のＡ君が赤組だから赤色とするならば赤組というグループだからＣＬＡＳＳを用いるべきだしＡ君だから赤色としたいならばＡ君という１個人を特定すべき，一意にするべきなのでＩＤを用いる。ただそこの赤組のＡ君をどの組の誰とも意識せず単に赤色としたい場合にＳＴＹＬＥ属性を用いる、と・・・。

で、質問者の感覚を推測すると、常に先に赤色にするＣＬＡＳＳがあり、Ｂ君を赤色にしたいと考えた時にＢ君も赤組としようと考えられているというか、赤色の人は赤組・・・。
となると、ＩＤの入る余地はないかと～。

蛇足：ＳＴＹＬＥ属性を用いた場合に、ある特定の指定が出来ません。ＳＴＹＬＥ要素や外部リンクによる読み込みだと指定出来るという事があります。
ＩＤとＣＬＡＳＳが競合した場合は、ＩＤの内容が採用されます。赤組のＡ君がＣＬＡＳＳ赤組は赤色でＩＤでＡ君は青色と指定された場合は、青色となります。
いずれも単純指定には関係ありませんが・・・・・。
使いこなすと便利です。

お礼

classは「cssにclassが登録されていて、htmlでclassが利用されているから
cssのデザインを使う」、
idは「htmlでidが登録されていて、cssでidが利用されているからcssのデザイン
を使う」
と、キーになるものが違うという事ですよね。

それでnameアトリビュートとの関係や、
スクリプトから特定の要素を取得する関係で
id名が重複する事は許されないという事。
この事から、id・nameは「HTML文書内の特定の位置を示すアトリビュート」
とも言えるのだと思います。
というか勝手にそう解釈しました。
そっちの方が分かり易いので。
「特定の位置を示すのだから重複してはならない」と。

あと、idについて1度しか登録出来なくて利用価値が全く分からなかったのですが、
htmlファイルが複数存在し、cssを外部ファイルとして持った場合には効力を
発揮しますね。
そこで、classやidで共通化出来ない部分についてstyleアトリビュートを
利用するべきという区分けもはっきり付きました。
外部cssファイルで既にそれらを定義していたら、htmlファイル内のstyleエレメントで
追加定義するという事も可能そうですね。
そうすると、本当に特殊な場合のみstyleアトリビュートを利用すべきだという事も
理解出来ました。

> ＳＴＹＬＥ属性を用いた場合に、ある特定の指定が出来ません。ＳＴＹＬＥ要素や外部リンクによる読み込みだと指定出来るという事があります。

これについても初めて知りました。
いい機会なので、そこら辺も調べてみようかと思います。

皆さん、何度も回答して頂き有難う御座います！

回答No.14

rsama

どのブラウザにも対応させたいということなら
やはり同じidを使うのはやめたほうが良いと思います。
同じidがあることでエラーになるブラウザはないとは思いますが、
一応、HTMLの文法的には間違いですので。

http://openlab.ring.gr.jp/k16/htmllint/explain.html#repeated-id

参考URL：

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

お礼

ありがとうございます。

css側がどうこうと言うより、html側のid定義が重複しなければ良いような気もしますが。
ただ、使い方は分かったので、一応、それに則った記述を行おうと思います。

補足

こんな所に記述しまいますが、今までidが理解出来ない理由が分かりました。

ID 属性：この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。

これについて、一意でなければならない理由がどこにも記されていません。
そのせいですね。
どんなに文章中でそう記されていても、複数存在していても動作しちゃうわけですし。
一意でなけれならない理由が明確にならない限り、理解は難しいです。
特にスクリプトを一切気にしなければ余計に理解に苦しみます。
そして、一意でなけれならない理由は「HTML文書内の特定の位置を示すアトリビュートだから」
という事で初めて理解出来ます。

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-id
の
「ハイパーテキストリンクの目標アンカー。」
「スクリプトから特定要素を参照するための手段。」
この2つと、idが重複している場合、スクリプトでは
エラーになるというお話、
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#anchors-with-id
の
「id属性とname属性は、同じ 名前空間を共有する。
これはつまり、同一文書では、両属性が、あるアンカーに同じ名前を
定めることができないということを意味する。」
という事、
nameアトリビュートで同一ページ内のある位置に移動するリンクを生成する
事が出来る事から、idが一意でなければならない事が分かりました。

皆さん、有難うございました。

回答No.13

goldfox

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

難しく考えることはありません。
混乱するのは「id=""」の使い方を分かっていないせいです。

もう一度言いますが、
「一度しか使わないからidを使う」のは間違い。
「スタイルシートにidを使う」必要はありません。
「（すでにある）idにスタイルを指定する」のです。

idが指定されていないページに、わざわざidを使ってスタイルを指定する必要はないです。
いずれ、JavaScriptなどでidが指定された要素などのあるページも作られるでしょう。
そうなってからidを使ったスタイルの指定法を覚えても遅くはありません。

<td style="font-size:10pt">
style=""　これをスタイル属性といいます。
ちょっとした変更には便利ですが、この要素にしか使えない、デザインや装飾をまとめて指定するというスタイルシートの概念に外れます。
これを
<td class="font10">として、スタイルシートで
font10{font-size:10pt} と指定しておけば、
他の要素にも指定することができるようになり、今はこの要素にしか使わなくても、将来的に大変便利です。

お礼

> idが指定されていないページに、わざわざidを使ってスタイルを指定する必要はないです。

#12の回答の通りに理解しました。
そうすると、全くその通りですね。
HTML文書内で特定したい位置が無いのならば基本は全てclassで良いですね。
cssを記述する順番としては以下でしょうか。

高
　外部cssファイルの指定エレメント
　htmlファイル内のstyleエレメントの指定エレメント
　外部cssファイルのclass
　htmlファイル内のstyleエレメントのclass
　外部cssファイルのid
　htmlファイル内のstyleエレメントのid
　styleアトリビュート
低

cssの指定方法について上記4つ（エレメント直接指定、
class、id、styleアトリビュート）しか知らないので、
他にもあれば優先順位が変わりそうです。
適用される順番としては逆ですね。

全通りはややこしそうだったので、とりあえずこんな感じでテストしてみました。
【a.css】
table { color:black; }
font { color:black; }
table.tcls { color:black; }
font.fcls { color:black; }
table#tcls { color:black; }
font#fcls { color:black; }

【a.html】
<LINK Rel="stylesheet" Type="text/css" Href="a.css">
<style type="text/css">
table { color:blue; }
font { color:red; }
table.tcls { color:yellow; }
font.fcls { color:green; }
table#tcls { color:cyan; }
font#fcls { color:magenta; }
</style>

<table><tr><td>あいうえお</td></tr></table>
<font>かきくけこ</font>

<table class="tcls"><tr><td>さしすせそ</td></tr></table>
<font class="fcls">たちつてと</font>

<table class="tcls" id="tcls"><tr><td>なにぬねの</td></tr></table>
<font class="fcls" id="fcls">はひふへほ</font>

<table class="tcls" id="tcls" style="color:orange"><tr><td>まみむめも</td></tr></table>
<font class="tcls" id="fcls" style="color:gray">やゆよ</font>

あまりブラウザを意識したくないというのが前提であって、
JavaScriptは一切使わない予定でしたので、
今回、idを意識する事はあまり無さそうです。

回答No.11

UKY

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

もう一度いいますが、CSS のことはほっといて、まずは HTML の正しい書き方という観点から考えてください。
HTML の正しい書き方を理解しないと CSS を正しく使いこなすことはできません。

http://homepage2.nifty.com/magicant/techmemo/htmlcsslinks.html

参考URL：

http://homepage2.nifty.com/magicant/techmemo/htmlcsslinks.html

回答No.10

UKY

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

お礼

<td style="font-size:10pt">

と

<style>
td#f10pt {
font-size:10pt;
}
<td id="f10pt">

の違いという事ですか。1度しか使わないという考え方からしたら、
このid(f10pt)は二度と使わないですよね。
はっきり言って前者の方で十分ですね。
HTMLファイル内にstyleタグを記述すればCSSファイルと
完全に切り分けられているわけでもありませんし・・・。

回答No.9

rsama

No6です
CSSは同じid複数合ってもいいんですね。
（CSSはclassでしか指定したことなかったんで知りませんでした＾＾；）
HTMLは多少仕様外の構文でもブラウザが融通利かせて有効にしてしまうこともありますからねぇ。
ですが、CSS以外の部分が絡んでくるとやっかいなことになるので
同じidを複数はやめたほうがいいです。
（そもそもidの意味がなくなってしまう）

>今回の質問で、プログラムでいうとclassはクラス、idはextendsという

違いますね＾＾；
idとclassに継承関係はありませんからね。

idは個人名
classはグループ名
と考えればよいのでは？

<div id="nakai" class="smap">S</div>
<div id="kimura" class="smap">S</div>
<div id="inagaki" class="smap">S</div>
<div id="chonan" class="smap">S</div>
<div id="katori" class="smap">S</div>

idで指定→中井さ～ん（「い」が違う）赤くなって。
#nakai {
color:red;
}

classで指定→SMAPの皆さん、大きくなってください
.smap {
font-size:20pt;
}

> あんまり気にする所でもないんでしょうかね？

まぁCSSだけに関して言えばid指定が特に有用な場面、
idでないといけない場面てのが少ないでしょうから、
ほとんどclassで指定でいいと思います。
1つだけ違うスタイルにしたいならstyle要素に直接記述しちゃってもいいわけですし。

回答No.8

koutarou504

まず 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

回答No.7

goldfox

＞href="./#test"　の#testは「id名」ではないです。
すみません。この点、ページ内リンクでIDを呼び出す（移動する）ことも可能なのを思い出しました。
そういう意味では、#testは「id名」であるともいえます。

cssに限って言うなら、No.6さんのいうように、IDは使う必要がないですね。

お礼

何度も有難うございます。
cssはclassだけで事は足りる、という事ですね・・・。
完全に迷宮入りしてしまいました（笑）

今回の質問で、プログラムでいうとclassはクラス、idはextendsという
感覚かなー（以下のように）と思っていましたが、そうでもないようで・・・。

<style type="text/css">
.fblue {
color:blue;
}
font#pt15b {
font-size:15pt;
font-weight:bold;
}
</style>
<table border=1>
<tr><td class="fblue">abc</td></tr>
<tr><td class="fblue">def</td></tr>
</table>
<font class="fblue" id="pt15b">ghi</font>
これだと、<td>でも<font>でも色を青にしたくて、
でもghiを表示する<font>は15ptの太字にしたい、みたいな。
こういうパターンで初めてidの意味を成すのでしょうか？

あんまり気にする所でもないんでしょうかね？（笑）

回答No.6

rsama

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

class要素はCSS専用っぽいところはありますが、id要素はCSS以外に使われることが多いように思います。

お礼

ありがとうございます。
ごめんなさい、教えてください＾＾；

<style type="text/css">
#fblue {
color:blue;
}
#fblue {
font-size:3pt;
}
</style>
<table border=1>
<tr><td id="fblue">abc</td></tr>
<tr><td id="fblue">def</td></tr>
</table>
<h3 id="fblue">ghi</h3>

これを実行するとタグ側3つともidは有効ですし、
css側(面倒だったのでstyleタグにしましたが)2つも有効になっています。
もしかして『1つ』の意味合いを勘違いしていますか？私。
それともcssで同名複数のid指定は出来るけど、しない方が良い、という事ですか？
それを真とするならば、cssで同名複数のclass指定は良しなのでしょうか？

回答No.5

goldfox

＞ID自体は1ページ内で何度も使えるんですよね？
＞動作はするみたいですが・・・。
＞何度も設定する事が出来ない？？

＞cssファイルでID(A)を設定していて、

IDと要素名は別物です。

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

<h1 class="title">あいうえお</h1>
「titleという定義付け」したcssを「h」要素に関連付けています。
.title{color:#ff0000;}/* class指定。文字色赤 */
文字色赤に定義付けたクラスセレクタ（title）を、
class=""で呼び出す、という感じです。

<a name="test">bbb</a>
の「name=""」は「name属性」であって、ID（属性）ではないです。
href="./#test"　の#testは「id名」ではないです。

お礼

む～・・・考え方の違いははっきりと分かりました。
が、結局どっちも挙動が一緒・・・。
id=xxx、class=xxxとしなければ有効にならない点から見たら、
idをclassとして利用してもいい気がします。
1つのタグ内で複数のidを利用する事は不可能なのですよね？

class、idを正しく利用した場合に有利になる点は
一体どこにあるのでしょうか？

回答No.4

goldfox

クラス…同ページ内で同じクラスを何回でも使える。
ID…同ページ内で同じIDは一回しか使えない。

「cssでIDを使う」のではなく、「IDにcssを設定する」と考えたほうがいいです。

お礼

む・・・難しいですね・・・。
ID自体は1ページ内で何度も使えるんですよね？
動作はするみたいですが・・・。
何度も設定する事が出来ない？？

cssファイルでID(A)を設定していて、
htmlファイルでcssファイルをリンク後に同じID(A)を設定したら
適用されるID(A)はhtmlファイルで設定した方、
という事でしょうか？

<a href="./#test">aaa</a>
<a name="test">bbb</a>
という意味なら確かに1回しか使えませんが、
これってCSSのIDと関係があるものなのでしょうか？