みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

こんにちは、よく<div class"○○○○">とか<div ID=""○○○>などと記述がしてあるのですが、classとIDの違いは何でしょうか?

私はよくわからないので、全部classで書いていたのですが、やはり何かが違うからclassとIDが存在するのだろうと思ったら、気になってしょうがありません。
ちなみに全部classで書いている私は駄目なのでしょうか?

また、classとIDの決定的な違いはなんでしょうか?使用方法や正しい使い方などが存在するのでしょうか?

とりあえず現在、全てclassで定義しているのですが、特にこれといった問題は内容に思えます。

詳しい方がおられましたら、宜しくお願いいたします。

投稿日時 - 2005-06-12 19:11:42

QNo.1444936

暇なときに回答ください

質問者が選んだベストアンサー

#8 への返信です。

> 再度ですが、こんな感じでは駄目なんでしょうか?
> classでも1つしか使用しない場合同様の効果が出来るのですが・・・。

効果が問題なのではなく、適用される範囲が問題なのです。
CSSの書式効果のみを見た場合、それがidであろうがclassであろうが関係はあ
りません。
スクリプトやアンカー機能で用いないのであれば、IDを忘れ去っても良いです。
#4 でも書きましたが、
『IDを使う必要がないのなら、使わなくてよいです。』
なのです。

私は #8 の例文で、
---------------------------------------------------------------------
印刷したくないのが「印刷したくない」のブロック以外にない場合、他の要素
にも「display:none」が適用される可能性があるのは問題ですよね。
---------------------------------------------------------------------
と書きました。
ここの『適用される可能性があるのは問題』を回避するために、範囲を明示し
たのがIDです。
「そんなもの、自分はclassでも管理できる」とお考えなら、IDは別段必要な
いです。
でも、第三者と共同制作する場合など、意味づけを共有しなければならない環
境では、なくてはならない機能です。

今一度、#4, #5, #8 を続けて読んでもらえば、分かると思うのですが、
どうでしょう。

投稿日時 - 2005-06-13 18:15:53

お礼

Bo_Boさん、度々本当にありがとう御座います。

>効果が問題なのではなく、適用される範囲が問題なのです。

素人ながら、心にしみました。実際大分理解が出来てきました。実際私、狭い世界のみで理解しようとしていた事が問題だと思います。それこそスクリプト等を使用した場合を考えたら理解が深まりました。

外部ファイル化した時とかでも、IDが威力を発揮しますよね?
本当にみなさんありがとう御座います。
もっと勉強していいWEBサイトが作れるようにがんばりたいと思います。

投稿日時 - 2005-06-13 22:41:13

ANo.11

このQ&Aは役に立ちましたか?

11人が「このQ&Aが役に立った」と投票しています

回答(13)

ANo.13

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

<DIV id=”sidDv001” class=”sclDv002”>
<SPAN id=”sidSp003” class=”sclSp006”>サンプル</SPAN>
<SPAN id=”sidSp005” class=”sclSp006”>さんぷる</SPAN>
</DIV>

SPAN に対して直接しか指定しないのなら CLASS も ID もあまり違いはありません。違いは CLASS は複数が同じ名称で指定でき、ID はそのソース内で一意という点です。
しかしこれが修飾する様な指定方法だと・・・。
実は同じ重みの指定の場合は後述のものが上書き指定となりますが
重みが違う場合はより重い方で。
それでその重みの判断に於いて ID は CLASS よりも重いと。
つまり、
 DIV#sidDv001 SPAN 文字色=赤
 DIV SPAN.sclSp006 文字色=黒
 DIV SPAN#sidSp005 文字色=青
とした場合、「サンプル」の文字色は赤の方が重いと。
「さんぷる」は重さが同じなので後による上書きで 青。

まぁ ID を CSS に意識するなら、以上の様な重みと
あとは一意である意味付けによるデザイン指定の場合。
使い分けをしていれば、将来デザインを変更したい時に
HTML ソースに手を入れなくて済みます。

尚、詳細は参考URLへ
「カスケーディングスタイルシート第1水準」
3.2 カスケードの順序

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

投稿日時 - 2005-06-14 02:41:26

ANo.12

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

投稿日時 - 2005-06-13 18:21:55

ANo.10

UKY

根本的に考え方を変えましょう。
「まず初めに 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

投稿日時 - 2005-06-13 17:38:48

お礼

長々と素人のためにありがとう御座います。

とても分かりやすく理解が出来た木がします。

本当にありがとう御座います。

投稿日時 - 2005-06-13 22:33:32

ANo.9

idとclassはそもそも違う属性です。
(idは個々の要素の識別名、classは要素のグループ名だと思ってください。)
スタイルシートがidでもclassでもどちらでも指定できるというだけです。
違う属性ですからもちろん
<div id="○○○" class="○○○○">
のように両方の属性を持たせることができます。

スタイルシート基準で考えればidで指定する絶対使用条件はないでしょうけど、
JavaScriptやASPなどにはidが必要になります。

投稿日時 - 2005-06-13 17:26:39

ANo.8

#5 の続きです。

簡単な例:

<html><head><title>TEST</title>
<style type="text/css">
#noPrint { color:green }
</style>
<style type="text/css" media="print">
#noPrint { display:none }
</style>
</head><body>
<h1>印刷したい</h1>
<div id="noPrint">
<h2>印刷したくない</h2>
</div>
</body></html>


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

これで理解が進みますか!?

投稿日時 - 2005-06-13 15:40:25

お礼

度々ありがとう御座います。

理解が悪くてすみません。再度ですが、こんな感じでは駄目なんでしょうか?classでも1つしか使用しない場合同様の効果が出来るのですが・・・。


<html><head><title>TEST</title>
<style type="text/css">
.noPrint { color:green }
</style>
<style type="text/css" media="print">
.noPrint { display:none }
</style>
</head><body>
<h1>印刷したい</h1>
<div class="noPrint">
<h2>印刷したくない</h2>
</div>
</body></html>

投稿日時 - 2005-06-13 16:08:42

ANo.7

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

投稿日時 - 2005-06-13 15:35:30

ANo.6

上手く説明できる自身はありませんが(^^;
反対に考えればよいのではないでしょうか。
「スタイルシートをidで指定する」のではなく、
「idで指定されているものをスタイルシートで装飾する」のです。
例えば
<div id="content">内容</div>
ここだけに装飾をしたいときclassを使った場合、
<div id="content" class="waku">内容</div>
などと書くことになりますね。
でもidを指定すれば
<div id="content">内容</div>
これだけで済むわけです。

投稿日時 - 2005-06-13 15:30:18

お礼

ありがとう御座います。

しかし私おもいますところ、classで1つしか定義しない場合<div class="content">内容</div>と同じような定義が出来るのですが・・・。

この違いは何でしょうか?

投稿日時 - 2005-06-13 15:37:40

ANo.5

#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" を別のものにすれば、レイアウトを維持したまま文章など
の書式を変えられます。

投稿日時 - 2005-06-13 15:13:31

ANo.4

まず、IDを使う必要がないのなら、使わなくてよいです。
classのみでスタイルを設定することは「よくあること」で問題はありません。

●idとは?

物を識別するための符号を設定するのに用います。
簡単に言ってしまえば「名札」です。

今、部屋に「Jeff, Eric, Jimi」の3人がいます。
この時、『やぁ!Eric』と声をかけたら、何の迷いもなくEricが返事をします。
しかし、ここにもう一人「Eric」が加わって、『やぁ!Eric』と声をかけたら、
どちらのEricが呼ばれたのか分かりません。
こう言う問題が起こらないように、「同じ部屋には同じ名前の人を入れない」
としたのがIDの考え方です。

ここで言う「部屋」をHTMLページ、名前をIDとすれば、HTML/CSSに当てはまり
ます。
「名前を呼ぶ」と言う動作は、Javascriptやアンカーとしてのリンクなどがあ
ります。

<p><a href="#foo">見出し1へジャンプ</a></p>
 :
<h1 id="foo">見出し1</h1>

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

<style type="text/css">
#header{...}
#navi{...}
#content{...}
#footer{...}
</style>

<div id="header">ページの最初</div>
<div id="navi">ナビゲーション</div>
<div id="content">内容</div>
<div id="footer">ページの最後</div>

●classとは?

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

投稿日時 - 2005-06-13 04:54:19

お礼

Bo_Boさん、大変分かりやすいご説明ありがとう御座います。

IDとclassの区分が大分理解できたかと思います。少し疑問が残るんですが・・・。
>まず、IDを使う必要がないのなら、使わなくてよいです。

逆に、必要な時とはどういったときなのでしょうか?使い分け方は分かりましたが、どちらでも対応が出来るんですよね?

例えば<h1>をIDかclassで設定したとした場合、IDは1ページに一回ですので問題ないと思います。ただclassで設定した場合、classは複数回使えるけど<h1>自体、1ページ一回の使用なので、classで一回だけ使用するといった考えは間違いでしょうか?

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

投稿日時 - 2005-06-13 12:43:37

ANo.3

>全部クラスではやっぱり駄目ですか??
ダメということはないです。
質問者にとって特に問題もないのだろうし。

例としては、あまりよくないかもしれませんが、
例えば、
そのページの更新日付を表示している部分であるとか
そのページを書いた人であるとか
連絡先であるとか
そのページに1つしかないものがあるとして、
それに何らかのスタイルを適用したいとするときに、
CSSでid指定で書いてあれば、1つしかない部分へのスタイルの適用だと判ります。
CSSでclass指定で書いてあれば、それは、(1つかもしれないが)おそらく、複数ある部分(いわゆるカテゴリ的な区分けでの)への適用であると推測します。
スクリプト(プログラム)の場合は、もっと切実です。
<input id="result" type="text" size="10" value="">
とかあって、なんらかの結果をそこに入れようという時、
document.getElementById("result").value="結果は○○";
とかでIDによって入れる場所を特定するのですが、IDがなければ、このような方法によっては特定できません。(別の方法で特定はできるかもしれませんが、IDは1つということが前提としてあるので、IDによるアクセスができれば、そのものずばりを特定できます)

投稿日時 - 2005-06-13 02:29:22

お礼

ありがとうございます。

なんとなくですが、理解できて来ました。

投稿日時 - 2005-06-13 12:31:45

ANo.2

>なぜ1つしか定義ができないのでしょうか?
エレメント(タグ)を特定するためです。

>1つしか定義ができないものを何故皆さんは使うのでしょうか?
IDは、CSSでスタイルを適用する時に特定するためだけでなく、scriptからもエレメントを特定するために使われます。
また、複数のHTML文書で、特定のエレメントに特定のスタイルを統一的にほどこす場合にも、スタイルシートは、1つで良いという使い方も考えられます。

投稿日時 - 2005-06-12 22:59:26

お礼

BLUEPIXYさん、度々ありがとう御座います。
しかし、私は納得が出来ません。

あえて1つしか定義できない物を使うより、沢山自由に定義できるclassを使ったほうが簡単なのではないでしょうか?

多分私は理解が出来ていないがために、この様なことを言っていると自分でも思います。

>エレメント(タグ)を特定するためです。

何のために特定するのですか?

>IDは、CSSでスタイルを適用する時に特定するためだけでなく、scriptからもエレメントを特定するために使われます。

うーん、わかりません。

全部クラスではやっぱり駄目ですか??

投稿日時 - 2005-06-12 23:14:22

ANo.1

IDは基本的に(1つのHTMLで)1つしか書けません。
複数に同じ設定をするために識別子を付けるのだったら
classで定義するのが正しいと思います。

投稿日時 - 2005-06-12 19:43:02

お礼

BLUEPIXYさん、ありがとう御座います。

>IDは基本的に(1つのHTMLで)1つしか書けません。

ただ思うのは、なぜ1つしか定義ができないのでしょうか?また、1つしか定義ができないものを何故皆さんは使うのでしょうか?

とても不思議です。

投稿日時 - 2005-06-12 21:50:19

あなたにオススメの質問