- ベストアンサー
classとIDの使い方？何が違うんでしょうか？
こんにちは、よく<div class"○○○○">とか<div ID=""○○○>などと記述がしてあるのですが、classとIDの違いは何でしょうか？ 私はよくわからないので、全部classで書いていたのですが、やはり何かが違うからclassとIDが存在するのだろうと思ったら、気になってしょうがありません。 ちなみに全部classで書いている私は駄目なのでしょうか？ また、classとIDの決定的な違いはなんでしょうか？使用方法や正しい使い方などが存在するのでしょうか？ とりあえず現在、全てclassで定義しているのですが、特にこれといった問題は内容に思えます。 詳しい方がおられましたら、宜しくお願いいたします。
- 404not_found
- お礼率61% (176/285)
- HTML
- 回答数13
- ありがとう数19
- みんなの回答 （13）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (12)
- koutarou504
- ベストアンサー率44% (182/407)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
- 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)
- 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)
- 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)
- 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サイトが作れるようにがんばりたいと思います。