• ベストアンサー

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

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

  • HTML
  • 回答数13
  • ありがとう数19

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

  • ベストアンサー
  • Bo_Bo
  • ベストアンサー率65% (97/149)
回答No.11

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

404not_found
質問者

お礼

Bo_Boさん、度々本当にありがとう御座います。 >効果が問題なのではなく、適用される範囲が問題なのです。 素人ながら、心にしみました。実際大分理解が出来てきました。実際私、狭い世界のみで理解しようとしていた事が問題だと思います。それこそスクリプト等を使用した場合を考えたら理解が深まりました。 外部ファイル化した時とかでも、IDが威力を発揮しますよね？ 本当にみなさんありがとう御座います。 もっと勉強していいWEBサイトが作れるようにがんばりたいと思います。

その他の回答 (12)

回答No.13

まず 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
  • ベストアンサー率50% (3003/5914)
回答No.12

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

  • UKY
  • ベストアンサー率50% (604/1207)
回答No.10

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

お礼

長々と素人のためにありがとう御座います。 とても分かりやすく理解が出来た木がします。 本当にありがとう御座います。

  • sakuhat
  • ベストアンサー率61% (11/18)
回答No.9

idとclassはそもそも違う属性です。 （idは個々の要素の識別名、classは要素のグループ名だと思ってください。） スタイルシートがidでもclassでもどちらでも指定できるというだけです。 違う属性ですからもちろん <div id="○○○" class="○○○○"> のように両方の属性を持たせることができます。 スタイルシート基準で考えればidで指定する絶対使用条件はないでしょうけど、 JavaScriptやASPなどにはidが必要になります。

  • Bo_Bo
  • ベストアンサー率65% (97/149)
回答No.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」が適用される可能性があるのは問題ですよね。 これで理解が進みますか！？

404not_found
質問者

お礼

度々ありがとう御座います。 理解が悪くてすみません。再度ですが、こんな感じでは駄目なんでしょうか？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)
回答No.7

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

  • goldfox
  • ベストアンサー率49% (123/249)
回答No.6

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

404not_found
質問者

お礼

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

  • Bo_Bo
  • ベストアンサー率65% (97/149)
回答No.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" を別のものにすれば、レイアウトを維持したまま文章など の書式を変えられます。

  • Bo_Bo
  • ベストアンサー率65% (97/149)
回答No.4

まず、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のみでスタイルを設定することに問題は ありません。

404not_found
質問者

お礼

Bo_Boさん、大変分かりやすいご説明ありがとう御座います。 IDとclassの区分が大分理解できたかと思います。少し疑問が残るんですが・・・。 >まず、IDを使う必要がないのなら、使わなくてよいです。 逆に、必要な時とはどういったときなのでしょうか？使い分け方は分かりましたが、どちらでも対応が出来るんですよね？ 例えば<h1>をIDかclassで設定したとした場合、IDは1ページに一回ですので問題ないと思います。ただclassで設定した場合、classは複数回使えるけど<h1>自体、1ページ一回の使用なので、classで一回だけ使用するといった考えは間違いでしょうか？ まだIDの絶対使用条件というものが理解できていないかもしれません・・・。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

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

404not_found
質問者

お礼

ありがとうございます。 なんとなくですが、理解できて来ました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 同じ内容でもclassとidによって変わりますか？

    classとidの違いは何となくわかっているのですが、同じ内容でもclassとして定義したものとidとして定義したものでは表示に違いが出るのでしょうか。やりたいことによってはここはidじゃなきゃだめだっていうようなものがありますか。

    • 締切済み
    • CSS
  • ＣＳＳについて教えてください。ｉｄ，ｃｌａｓｓ

    <body> <div class="style1" id="header"> <div id="logo"><img src="images/banner.gif" alt="見本1"/></div> <ul id="globalNav"> <li><a href="index.html">見本2</a></li> </ul> </div> <div id="contentWrapper"> <div id="content"> <div id="primary"> ※参考書に上記の様な書き出し記述があるのですが、1.まず素人考えでコンテナの様な土台となるボックスはないと考えていいですか？ 2.ｉｄがｄｉｖに包含されいくつも出てきますが，ｉｄは一つしか使用できないため慎重にって事は無いのですか？ 固有を確定するために便利なのですか？ 3.div classのあとｉｄが使われている様に思うのですが、ｃｌａｓｓにもｉｄは使えますか？？ 的外れですみません

  • id class

    過去問で http://personal.okwave.jp/qa2460757.html と同じ質問なのですが、こういうふうに考えてもいいでしょうか？ １．id　は使わず、class だけを使っていれば問題はない。 また、 ２．id は同じページ内では１箇所とありますが、 div#input {・・・・・} と指定して、<div id="input"></div> という箇所を何箇所も指定していますが、何の問題もなく表示されています。 これはどういうことでしょうか？ よろしくお願いします。

  • CSSのid名class名の重複回避方法について

    今、複数ページがあるサイトを作ろうとしているのですが、 他の人が作成をする場合もあるので、 ヘッダ・フッタなど、共通部分に使っているcssの設定（idやclass名）と、 個々のページで設定するcssの設定が重複しないようにしたいと思っています。 もし、共通cssと個別cssに同じ#fontというid名が存在してしまったとして、 個別のページのcssファイルに↓の用に記述し #page01 #font{ 　color:#FFFFFF; } html内の、<div id="page01">～</div> の中に含まれるid="font"と定義した場合 共通のidに#font　が存在していても大丈夫なのでしょうか？ また、大丈夫な場合、idやclassを作るたびに #page01 #font #page01 .photo と#page01を頭に全部つけると分かりづらくなるな。。と思うのですが、 それを回避する方法はありますでしょうか？ ほか、重複しないアイデアをご存知の方がいらっしゃいましたら ご教示いただければ幸いです。 どうぞよろしくお願いいたします！

    • ベストアンサー
    • CSS
  • divのclassの内容を変更するにはどう記述すればいいですか?

    divのclassの内容を変更するにはどう記述すればいいですか? 例えば <div id="usr_table" class="invisible"> という風に状況に応じて書き換えて不可視にしたいのですが

  • この場合はid？class？

    本日ウェブデザイン技能検定を受けたのですが、 後から調べてもどうしてもよく分からない問題があったので質問させていただきます。 Ｑ．要素に固有の値を定義する属性として適切な物を選択しなさい Ａ． １．<p id="lead">文章</p> ２．<p src="lead">文章</p> ３．<p title="lead">文章</p> ４．<p class="lead">文章</p> ２と３は多分違うと思うので、１か４だと思ったのですがどちらも正解な気がしてなりません… idとclassの違いについて調べてみても、大抵「1つだけか複数かの違い」のように書かれていて このような問いで出されたらどちらが正しいのでしょうか？ 教えていただければ幸いです。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 指定したidやclass以外の要素を指定するには

    cssで特定のidやclassを持った要素を指定することは常識ですが 指定したidやclass以外の要素を指定する方法はありますか？ 例えば#mainというidを持ったdiv要素を除いた全てのdiv要素を指定するなど。 本来は共通のクラスを割り当てるのが正しいやり方だと思いますが、、、

    • ベストアンサー
    • CSS
  • classList で、class名が付かない。

    classList を使用して、新規で div タグに class 名を付けようと思っています。 div に id 名を付け、それを対象とした場合は、class 名は付きますが、 id名を含めない タグのみでは、class 名は付かないのでしょうか? コードは以下記述の通りです。 ご回答どうぞよろしくお願いいたします。 <html> <head></head> <body> <div id="hoge">class-name on tag.</div> <script> var dom = document.getElementById( 'hoge' ); //以下のように使えるなら理想です。 //var dom = document.getElementByTagName( 'div' ); dom.classList.add( 'test' ); </script> </body> </html>

  • CSS　idとclassをtableでつかうとき

    内部cssで テーブルに装飾をしようとしていたのですが、 <style type="text/css"> <!-- table.sample td {font-size:12px;} --> </style> <table class="sample">・・・ これは有効でした <style type="text/css"> <!-- table#sample td {font-size:12px;} --> </style> <table id="sample">・・・ これは無効でした なぜでしょう？classとidはそのユニーク性のみの違いかと思っていましたが。 このような機能的な違いもあるのでしょうか。 それとも単に記述ミスですかね。。。

    • ベストアンサー
    • CSS
  • 複数ページでのidとclassの使い分け

    . よくある、id と class の使い分けについてですが、複数ページに共通して存在するようなレイアウトに対する考え方についてです。 今まで、一つのページ内に一つだけ存在するものに対しては id を割り振り、一つのページに共通して存在するものに対してのみ class を割り振ってきました。ですので、class より id をベースにコーディングしていたという感じです。 ただ、最近、ページが増えるたびにどうもソースがなんとなく見にくく、メンテナンスに不効率な感じがしてます。特に、複数ページに共通したレイアウトがある場合です。 一つのページ内に共通して存在するものに対してのみ class を割り振り、その他は全てidを割り振るという考え方を貫くと、同一ページには同じレイアウトは存在しないが他の複数のページには同じレイアウトが存在しているような場合にも、基本的にその複数ページのどのページにもその共通したレイアウトに関して共通した id を割り振ることになってしまいます。 しかし、メンテナンス性を考えると、このような場合も基本的に class を割り振り、複数ページの内のあるページだけ少しデザインを変えるようなときだけ id を割り振る、といった使い方のほうがソースが見やすくすっきりするような感じがします。 ですので、最初から claas を割り振ることをベースとして、全ページを通じてそのレイアウトが固有のものになりそうな場合にだけ id にする、または、後から固有のものになった部分にだけclassに加えて後からidも付与する、というようなシンプルなコーディングに転換したいと考えてます。 しかし、この方法ですと、他のページには同じレイアウトが存在するとはいえ同一ページにはそのレイアウトが1つだけしか存在しないにもかかわらずidでなくclassを付与してしまう場面が増大してしまい、原則論から考えると若干気にはなってしまいます。(ひょっとすると私の原則論のとらえ方がそもそも間違っているのかもしれません) このあたり、どう考えたらよろしいでしょうか? 何かかいろいろなご意見や考え方を頂けますとうれしいです。 .

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する