- ベストアンサー
classとIDの使い方？何が違うんでしょうか？
こんにちは、よく<div class"○○○○">とか<div ID=""○○○>などと記述がしてあるのですが、classとIDの違いは何でしょうか？ 私はよくわからないので、全部classで書いていたのですが、やはり何かが違うからclassとIDが存在するのだろうと思ったら、気になってしょうがありません。 ちなみに全部classで書いている私は駄目なのでしょうか？ また、classとIDの決定的な違いはなんでしょうか？使用方法や正しい使い方などが存在するのでしょうか？ とりあえず現在、全てclassで定義しているのですが、特にこれといった問題は内容に思えます。 詳しい方がおられましたら、宜しくお願いいたします。
- 404not_found
- お礼率61% (176/285)
- HTML
- 回答数13
- ありがとう数19
- みんなの回答 （13）
- 専門家の回答
質問者が選んだベストアンサー
#8 への返信です。 > 再度ですが、こんな感じでは駄目なんでしょうか？ > classでも1つしか使用しない場合同様の効果が出来るのですが・・・。 効果が問題なのではなく、適用される範囲が問題なのです。 CSSの書式効果のみを見た場合、それがidであろうがclassであろうが関係はあ りません。 スクリプトやアンカー機能で用いないのであれば、IDを忘れ去っても良いです。 #4 でも書きましたが、 『IDを使う必要がないのなら、使わなくてよいです。』 なのです。 私は #8 の例文で、 --------------------------------------------------------------------- 印刷したくないのが「印刷したくない」のブロック以外にない場合、他の要素 にも「display:none」が適用される可能性があるのは問題ですよね。 --------------------------------------------------------------------- と書きました。 ここの『適用される可能性があるのは問題』を回避するために、範囲を明示し たのがIDです。 「そんなもの、自分はclassでも管理できる」とお考えなら、IDは別段必要な いです。 でも、第三者と共同制作する場合など、意味づけを共有しなければならない環 境では、なくてはならない機能です。 今一度、#4, #5, #8 を続けて読んでもらえば、分かると思うのですが、 どうでしょう。
その他の回答 (12)
- koutarou504
- ベストアンサー率44% (182/407)
まず CSS の指定の仕方について考えてみましょう。 ＜ＤＩＶ ｉｄ＝”ｓｉｄＤｖ００１” ｃｌａｓｓ＝”ｓｃｌＤｖ００２”＞ ＜ＳＰＡＮ ｉｄ＝”ｓｉｄＳｐ００３” ｃｌａｓｓ＝”ｓｃｌＳｐ００６”＞サンプル＜／ＳＰＡＮ＞ ＜ＳＰＡＮ ｉｄ＝”ｓｉｄＳｐ００５” ｃｌａｓｓ＝”ｓｃｌＳｐ００６”＞さんぷる＜／ＳＰＡＮ＞ ＜／ＤＩＶ＞ ＳＰＡＮ に対して直接しか指定しないのなら CLASS も ID もあまり違いはありません。違いは CLASS は複数が同じ名称で指定でき、ID はそのソース内で一意という点です。 しかしこれが修飾する様な指定方法だと・・・。 実は同じ重みの指定の場合は後述のものが上書き指定となりますが 重みが違う場合はより重い方で。 それでその重みの判断に於いて ID は CLASS よりも重いと。 つまり、 ＤＩＶ＃ｓｉｄＤｖ００１ ＳＰＡＮ 文字色＝赤 ＤＩＶ ＳＰＡＮ．ｓｃｌＳｐ００６ 文字色＝黒 ＤＩＶ ＳＰＡＮ＃ｓｉｄＳｐ００５ 文字色＝青 とした場合、「サンプル」の文字色は赤の方が重いと。 「さんぷる」は重さが同じなので後による上書きで 青。 まぁ ID を CSS に意識するなら、以上の様な重みと あとは一意である意味付けによるデザイン指定の場合。 使い分けをしていれば、将来デザインを変更したい時に HTML ソースに手を入れなくて済みます。 尚、詳細は参考ＵＲＬへ 「カスケーディングスタイルシート第1水準」 3.2 カスケードの順序
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>classで一回だけ使用するといった考えは間違いでしょうか？ 別に、間違いではありませんが、 あなたがＨＴＭＬを書いて、それを何年も後から（あるいは他の人が）そのＨＴＭＬを読んだ時、どう思うでしょうか？ classで指定されているモノは、（今見ているソースの）別の場所にまたclass指定があるかもしれません。 また、今このＨＴＭＬには１つしかなくても、分類上将来的に増える可能性があるのかもしれません。 しかし、ＩＤで指定してあるモノについては、（基本的には）１つ見つけた時点で、そのＨＴＭＬには、１つしかないということが判明します。 つまり、複数に適用できるもの（class）は、１つのモノにも適用はできますが、それがただ１つであるということを保証してくれませんが、ただ１つであるというもの（ＩＤ）は、それがただ１つのものであることを保証してくれます。
- UKY
- ベストアンサー率50% (604/1207)
根本的に考え方を変えましょう。 「まず初めに 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 の回答
お礼
長々と素人のためにありがとう御座います。 とても分かりやすく理解が出来た木がします。 本当にありがとう御座います。
- sakuhat
- ベストアンサー率61% (11/18)
idとclassはそもそも違う属性です。 （idは個々の要素の識別名、classは要素のグループ名だと思ってください。） スタイルシートがidでもclassでもどちらでも指定できるというだけです。 違う属性ですからもちろん <div id="○○○" class="○○○○"> のように両方の属性を持たせることができます。 スタイルシート基準で考えればidで指定する絶対使用条件はないでしょうけど、 JavaScriptやASPなどにはidが必要になります。
- Bo_Bo
- ベストアンサー率65% (97/149)
#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」が適用される可能性があるのは問題ですよね。 これで理解が進みますか！？
お礼
度々ありがとう御座います。 理解が悪くてすみません。再度ですが、こんな感じでは駄目なんでしょうか？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>
- goldfox
- ベストアンサー率49% (123/249)
#6です。すみません、書きミスです（＞＜; 自身＞自信 idで指定されているもの＞idがついているもの（要素）
- goldfox
- ベストアンサー率49% (123/249)
上手く説明できる自身はありませんが(^^; 反対に考えればよいのではないでしょうか。 「スタイルシートをidで指定する」のではなく、 「idで指定されているものをスタイルシートで装飾する」のです。 例えば <div id="content">内容</div> ここだけに装飾をしたいときclassを使った場合、 <div id="content" class="waku">内容</div> などと書くことになりますね。 でもidを指定すれば <div id="content">内容</div> これだけで済むわけです。
お礼
ありがとう御座います。 しかし私おもいますところ、classで1つしか定義しない場合<div class="content">内容</div>と同じような定義が出来るのですが・・・。 この違いは何でしょうか？
- Bo_Bo
- ベストアンサー率65% (97/149)
#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
- ベストアンサー率65% (97/149)
まず、IDを使う必要がないのなら、使わなくてよいです。 classのみでスタイルを設定することは「よくあること」で問題はありません。 ●idとは？ 物を識別するための符号を設定するのに用います。 簡単に言ってしまえば「名札」です。 今、部屋に「Jeff, Eric, Jimi」の３人がいます。 この時、『やぁ！Eric』と声をかけたら、何の迷いもなくEricが返事をします。 しかし、ここにもう一人「Eric」が加わって、『やぁ！Eric』と声をかけたら、 どちらのEricが呼ばれたのか分かりません。 こう言う問題が起こらないように、「同じ部屋には同じ名前の人を入れない」 としたのがIDの考え方です。 ここで言う「部屋」をHTMLページ、名前をIDとすれば、HTML/CSSに当てはまり ます。 「名前を呼ぶ」と言う動作は、Javascriptやアンカーとしてのリンクなどがあ ります。 <p><a href="#foo">見出し１へジャンプ</a></p> ： <h1 id="foo">見出し１</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のみでスタイルを設定することに問題は ありません。
お礼
Bo_Boさん、大変分かりやすいご説明ありがとう御座います。 IDとclassの区分が大分理解できたかと思います。少し疑問が残るんですが・・・。 >まず、IDを使う必要がないのなら、使わなくてよいです。 逆に、必要な時とはどういったときなのでしょうか？使い分け方は分かりましたが、どちらでも対応が出来るんですよね？ 例えば<h1>をIDかclassで設定したとした場合、IDは1ページに一回ですので問題ないと思います。ただclassで設定した場合、classは複数回使えるけど<h1>自体、1ページ一回の使用なので、classで一回だけ使用するといった考えは間違いでしょうか？ まだIDの絶対使用条件というものが理解できていないかもしれません・・・。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>全部クラスではやっぱり駄目ですか？？ ダメということはないです。 質問者にとって特に問題もないのだろうし。 例としては、あまりよくないかもしれませんが、 例えば、 そのページの更新日付を表示している部分であるとか そのページを書いた人であるとか 連絡先であるとか そのページに１つしかないものがあるとして、 それに何らかのスタイルを適用したいとするときに、 ＣＳＳでid指定で書いてあれば、１つしかない部分へのスタイルの適用だと判ります。 ＣＳＳでclass指定で書いてあれば、それは、（１つかもしれないが）おそらく、複数ある部分（いわゆるカテゴリ的な区分けでの）への適用であると推測します。 スクリプト（プログラム）の場合は、もっと切実です。 <input id="result" type="text" size="10" value=""> とかあって、なんらかの結果をそこに入れようという時、 document.getElementById("result").value="結果は○○"; とかでＩＤによって入れる場所を特定するのですが、ＩＤがなければ、このような方法によっては特定できません。（別の方法で特定はできるかもしれませんが、ＩＤは１つということが前提としてあるので、ＩＤによるアクセスができれば、そのものずばりを特定できます）
お礼
ありがとうございます。 なんとなくですが、理解できて来ました。
- 1
- 2
お礼
Bo_Boさん、度々本当にありがとう御座います。 >効果が問題なのではなく、適用される範囲が問題なのです。 素人ながら、心にしみました。実際大分理解が出来てきました。実際私、狭い世界のみで理解しようとしていた事が問題だと思います。それこそスクリプト等を使用した場合を考えたら理解が深まりました。 外部ファイル化した時とかでも、IDが威力を発揮しますよね？ 本当にみなさんありがとう御座います。 もっと勉強していいWEBサイトが作れるようにがんばりたいと思います。