クラスとIDの違いは？

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

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

No.1 回答者： noname#20377 回答日時： 2006/06/30 21:23

解りやすそうだな、これは。

P-0045 class と id の違いとは？
http://deztec.jp/x/01/tips/page/p0045.html

idはフラグメントにも使えるしねー
http://www.kanzaki.com/docs/html/htminfo12.html

この回答へのお礼

ありがとうございます。
CLASSは分類、IDは分類に対する個々って感じの意味ですね。
2階層構造だったんですねーCSS。

なんか、「:」か「#」かわけわからなくなってきました・・・。
「:」はAタグの時にしか利用した事なくて・・・。
a:linkとかa:hoverとか。HTML側にid="xxx"書かなくていいし・・・。

CSS
table:footer {
border:1px solid;
}

HTML
<table id="footer">
<tr><td>
<font style="font-size:9pt">test</font>
</td></tr>
</table>

これだと動かないのですが、何が間違っているのでしょう？

お礼日時：2006/06/30 21:45

No.2 回答者： yambejp 回答日時： 2006/06/30 22:13

<style type="text/css">

table#footer{
border-style:solid;
border-width:1px;
border-color:#000000;
}
</style>
<table id="footer">
<tr><td>
<span style="font-size:9pt">test</span>
</td></tr>
</table>

この回答へのお礼

「:」って、ただアトリビュートの設定時の利用で、
ID自体は「#」ですか。
やはりIDは「#」ですよね。

なんか、CSSについてゼロから学びそうな勢いで混乱して参りました（笑）

ありがとうございます。

お礼日時：2006/06/30 22:17

No.3 回答者： noname#19206 回答日時： 2006/06/30 22:46

＞「:」って、ただアトリビュートの設定時の利用で、

＞ID自体は「#」ですか。
基本的に "." がクラスで "#" が ID です。
ただし A:link などはリンクを設定する擬似クラス、特殊なパターンです。

No.4 回答者： goldfox 回答日時： 2006/06/30 23:29

クラス…同ページ内で同じクラスを何回でも使える。

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と関係があるものなのでしょうか？

お礼日時：2006/07/01 00:28

No.5 回答者： goldfox 回答日時： 2006/07/01 01:40

＞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を正しく利用した場合に有利になる点は
一体どこにあるのでしょうか？

お礼日時：2006/07/01 01:59

No.6 回答者： rsama 回答日時： 2006/07/01 01:55

同じ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指定は良しなのでしょうか？

お礼日時：2006/07/01 02:09

No.7 回答者： goldfox 回答日時： 2006/07/01 02:05

＞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の意味を成すのでしょうか？

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

お礼日時：2006/07/01 02:21

No.8 回答者： koutarou504 回答日時： 2006/07/01 02:43

まず 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/corr …

No.9 回答者： rsama 回答日時： 2006/07/01 03:07

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.10 回答者： UKY 回答日時： 2006/07/01 15:21

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

CSS のことは抜きにして、純粋に HTML のより良い書き方は何かと言う観点から考えてみてください。

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1444936 …
http://web.xii.jp/iec/html/memo/id-class
http://www.tg.rim.or.jp/~hexane/ach/awht/awht07. …
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ファイルと
完全に切り分けられているわけでもありませんし・・・。

お礼日時：2006/07/01 18:41