classとIDの使い方？何が違うんでしょうか？

Question

こんにちは、よく

とか

などと記述がしてあるのですが、classとIDの違いは何でしょうか？私はよくわからないので、全部classで書いていたのですが、やはり何かが違うからclassとIDが存在するのだろうと思ったら、気になってしょうがありません。ちなみに全部classで書いている私は駄目なのでしょうか？また、classとIDの決定的な違いはなんでしょうか？使用方法や正しい使い方などが存在するのでしょうか？とりあえず現在、全てclassで定義しているのですが、特にこれといった問題は内容に思えます。詳しい方がおられましたら、宜しくお願いいたします。

Bo_Bo · Accepted Answer

#8 への返信です。

> 再度ですが、こんな感じでは駄目なんでしょうか？
> classでも1つしか使用しない場合同様の効果が出来るのですが・・・。

効果が問題なのではなく、適用される範囲が問題なのです。
CSSの書式効果のみを見た場合、それがidであろうがclassであろうが関係はあ
りません。
スクリプトやアンカー機能で用いないのであれば、IDを忘れ去っても良いです。
#4 でも書きましたが、
『IDを使う必要がないのなら、使わなくてよいです。』
なのです。

私は #8 の例文で、
---------------------------------------------------------------------
印刷したくないのが「印刷したくない」のブロック以外にない場合、他の要素
にも「display:none」が適用される可能性があるのは問題ですよね。
---------------------------------------------------------------------
と書きました。
ここの『適用される可能性があるのは問題』を回避するために、範囲を明示し
たのがIDです。
「そんなもの、自分はclassでも管理できる」とお考えなら、IDは別段必要な
いです。
でも、第三者と共同制作する場合など、意味づけを共有しなければならない環
境では、なくてはならない機能です。

今一度、#4, #5, #8 を続けて読んでもらえば、分かると思うのですが、
どうでしょう。

koutarou504 · Answer

まず CSS の指定の仕方について考えてみましょう。

＜ＤＩＶ　ｉｄ＝”ｓｉｄＤｖ００１”　ｃｌａｓｓ＝”ｓｃｌＤｖ００２”＞
＜ＳＰＡＮ　ｉｄ＝”ｓｉｄＳｐ００３”　ｃｌａｓｓ＝”ｓｃｌＳｐ００６”＞サンプル＜／ＳＰＡＮ＞
＜ＳＰＡＮ　ｉｄ＝”ｓｉｄＳｐ００５”　ｃｌａｓｓ＝”ｓｃｌＳｐ００６”＞さんぷる＜／ＳＰＡＮ＞
＜／ＤＩＶ＞

ＳＰＡＮ に対して直接しか指定しないのなら CLASS も ID もあまり違いはありません。違いは CLASS は複数が同じ名称で指定でき、ID はそのソース内で一意という点です。
しかしこれが修飾する様な指定方法だと・・・。
実は同じ重みの指定の場合は後述のものが上書き指定となりますが
重みが違う場合はより重い方で。
それでその重みの判断に於いて ID は CLASS よりも重いと。
つまり、
　ＤＩＶ＃ｓｉｄＤｖ００１　ＳＰＡＮ　文字色＝赤
　ＤＩＶ　ＳＰＡＮ．ｓｃｌＳｐ００６　文字色＝黒
　ＤＩＶ　ＳＰＡＮ＃ｓｉｄＳｐ００５　文字色＝青
とした場合、「サンプル」の文字色は赤の方が重いと。
「さんぷる」は重さが同じなので後による上書きで 青。

まぁ ID を CSS に意識するなら、以上の様な重みと
あとは一意である意味付けによるデザイン指定の場合。
使い分けをしていれば、将来デザインを変更したい時に
HTML ソースに手を入れなくて済みます。

尚、詳細は参考ＵＲＬへ
「カスケーディングスタイルシート第1水準」
3.2    カスケードの順序

参考URL：http://www.doraneko.org/webauth/css1/19961217/Overview.html#cascading-order

BLUEPIXY · Answer

>classで一回だけ使用するといった考えは間違いでしょうか？
別に、間違いではありませんが、
あなたがＨＴＭＬを書いて、それを何年も後から（あるいは他の人が）そのＨＴＭＬを読んだ時、どう思うでしょうか？
classで指定されているモノは、（今見ているソースの）別の場所にまたclass指定があるかもしれません。
また、今このＨＴＭＬには１つしかなくても、分類上将来的に増える可能性があるのかもしれません。
しかし、ＩＤで指定してあるモノについては、（基本的には）１つ見つけた時点で、そのＨＴＭＬには、１つしかないということが判明します。
つまり、複数に適用できるもの（class）は、１つのモノにも適用はできますが、それがただ１つであるということを保証してくれませんが、ただ１つであるというもの（ＩＤ）は、それがただ１つのものであることを保証してくれます。

UKY · Answer

根本的に考え方を変えましょう。
「まず初めに HTML ありき」なのです。そして、完成した HTML に合わせてスタイルシートを作るのです。
「スタイルを設定できるように id や class を設定しておく」というのではなくて、「id や class が設定してあったので、それを使ってより良いスタイル設定ができた」ということなのです。

そもそも id や class はスタイル設定だけのためにあるのではありません。他の方もおっしゃっていますが、例えばスクリプトで文書内容を書き換えるときは、class よりも id の方が重要になってきます。あるいは編集ソフトで HTML を編集するとき、指定した id/class の部分だけ抜き出して新しく保存する、というようなことができるかもしれません。

もう一度言いますが、スタイルシートに合わせて HTML の id や class を設定するのでは《ありません》。HTML 文書を書くとき (スタイルシートを作る前) に、文書の構造や内容に合わせてふさわしい id/class をつけるのです。できるだけたくさん id/class を設定しておくほうがいいでしょう。そして、HTML 文書が完璧に出来上がってから、id/class に合わせてスタイル設定やスクリプト作成をするのです。
もちろん全ての id/class に対してスタイル設定をしないといけないなんてことはありません。id や class はスタイル設定だけのためにあるのではないのですからね。スタイル設定のときには役に立たなかった id があってもスクリプト作成のときに役に立つかもしれないし、あるいは最終的にあなたにとってまったく役に立たない id があるかもしれない。

実際、CSS でスタイル設定をするとき、id の恩恵にあずかる機会はそう多くないと思います。でも逆に、JavaScript にとって class はあってもなくてもほとんど違いがないというほど影の薄い存在です。設定した id や class を全部余すところなく使い果たすことなんてないでしょう。でも、それでいいんです。
HTML ソースに id 属性や class 属性を記述しようとしているとき、あなたは CSS でも JavaScript でもなく HTML を書いているのです。HTML の正しい書き方にしたがって id と class を設定する、ただそれだけのことです。HTML を書くときに、スタイルとかスクリプトなどの雑念にとらわれていてはだめだということです。

参考:
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1302776
の No.4 の回答

参考URL：http://oshiete1.goo.ne.jp/kotaeru.php3?q=1302776

sakuhat · Answer

idとclassはそもそも違う属性です。（idは個々の要素の識別名、classは要素のグループ名だと思ってください。）スタイルシートがidでもclassでもどちらでも指定できるというだけです。違う属性ですからもちろん

のように両方の属性を持たせることができます。スタイルシート基準で考えればidで指定する絶対使用条件はないでしょうけど、 JavaScriptやASPなどにはidが必要になります。

Bo_Bo · Answer

#5 の続きです。簡単な例： TEST

印刷したい

印刷したくない

上のHTMLでは、id属性 "noPrint" の付いたブロックが印刷されません。（印刷プレビューで確認してください）これ、"noPrint" をIDではなく、classとして定義したらどうなるか考えてください。印刷したくないのが「印刷したくない」のブロック以外にない場合、他の要素にも「display:none」が適用される可能性があるのは問題ですよね。これで理解が進みますか！？

goldfox · Answer

#6です。すみません、書きミスです（＞＜;
自身＞自信
idで指定されているもの＞idがついているもの（要素）

goldfox · Answer

上手く説明できる自身はありませんが(^^; 反対に考えればよいのではないでしょうか。「スタイルシートをidで指定する」のではなく、「idで指定されているものをスタイルシートで装飾する」のです。例えば

内容

ここだけに装飾をしたいときclassを使った場合、

内容

などと書くことになりますね。でもidを指定すれば

内容

これだけで済むわけです。

Bo_Bo · Answer

#4 です。

> まだIDの絶対使用条件というものが理解できていないかもしれません・・。

スタイル(CSS)での使用のみを考えているので、理解しづらいのだと思います。
id属性がスタイル以外で果たす役割には、

1. リンクの目標アンカー（<a name="anchor">...</a>と同じ働き）
2. スクリプトなどから参照するための要素の特定

などがあり、これらの役割の方がid属性らしいとも言えます。

スタイルに目を向ければ、その唯一無二の特性を生かして、テンプレート的な
使い方が出来ます。
共通するページのレイアウトをid属性を割り振ったブロック要素で行い、内容
物の書式をそのページ個別で行うなど・・・。

<head>
　：
<link rel="stylesheet" href="layout.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>

上の "style.css" を別のものにすれば、レイアウトを維持したまま文章など
の書式を変えられます。

Bo_Bo · Answer

まず、IDを使う必要がないのなら、使わなくてよいです。 classのみでスタイルを設定することは「よくあること」で問題はありません。 ●idとは？物を識別するための符号を設定するのに用います。簡単に言ってしまえば「名札」です。今、部屋に「Jeff, Eric, Jimi」の３人がいます。この時、『やぁ！Eric』と声をかけたら、何の迷いもなくEricが返事をします。しかし、ここにもう一人「Eric」が加わって、『やぁ！Eric』と声をかけたら、どちらのEricが呼ばれたのか分かりません。こう言う問題が起こらないように、「同じ部屋には同じ名前の人を入れない」としたのがIDの考え方です。ここで言う「部屋」をHTMLページ、名前をIDとすれば、HTML/CSSに当てはまります。「名前を呼ぶ」と言う動作は、Javascriptやアンカーとしてのリンクなどがあります。

見出し１へジャンプ

　：

見出し１

スタイルの定義方法は、ページの内容を明確な区分ごとに分け、その区分にスタイルを定義するのが一般的です。

ナビゲーション

内容

●classとは？書式の定義をグループ化したものです。 IDを使う必要性がないのなら、classのみでスタイルを設定することに問題はありません。

classとIDの使い方？何が違うんでしょうか？

#8 への返信です。

まず CSS の指定の仕方について考えてみましょう。

>classで一回だけ使用するといった考えは間違いでしょうか？

根本的に考え方を変えましょう。

idとclassはそもそも違う属性です。

#5 の続きです。

#6です。

上手く説明できる自身はありませんが(^^;

#4 です。

まず、IDを使う必要がないのなら、使わなくてよいです。

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

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

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

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