クラスと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.3

noname#19206

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

回答No.2

yambejp

<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についてゼロから学びそうな勢いで混乱して参りました（笑）

ありがとうございます。

回答No.1

noname#20377

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

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>

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