- ベストアンサー
CSS classの場合とidの場合の指定方法
h1などをブロック要素ごとに、違うスタイルを適用させたく、下記のように、記述したのですが、ブロック要素をidで指定する場合は同じように、#mainと#main h1で指定し、<div id="main">とすればよいのでしょうか？ それとも、h1は.main h1 とクラス指定して、<div id="main" class="main">とした方がよいのでしょうか？変な質問かもしれませんが、どちらも同じように表示するので、どちらがよいのか分かりません． <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- .main { width:100px;} .main h1 { color:red;} --></style> </head> <body> <div class="main"> <h1>aaa</h1> </div> </body> </html>
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
■違い classは１つのＨＴＭＬの中で重複使用が認められています。 idは１つのＨＴＭＬの中で重複使用が認められません。 ** classはＨＴＭＬ中で再利用可能ってことです。 従って、全部をclassにしても問題はありません。 しかし、あえてidを使用するほうが明示的に１回しか使っていないことを現せます。 ** w3cにはhtmlバリデータだけでなく、cssバリデータもあります。
その他の回答 (2)
- kyotokyo
- ベストアンサー率35% (27/77)
基本的にclassで指定しておけばよいと思います。 すでに述べられましたがclassは再利用が可能で、idは一度しか使えません。 あえてidで指定することは無いのではないでしょうか？
お礼
ありがとうございます。記述が少しでも楽ということ、idとclassを使い分けようという意図で質問させて頂きました。idが一度だけの記述であれば、どちらも誤りではないということですね。参考になりました。
- x_jouet_x
- ベストアンサー率68% (162/236)
各ブロック要素ごとに異なるスタイルを適用されたいのであれば、id属性とclass属性のどちらを使用しても構いませんよ。 「どちらかを使わなければならない」というルールはありません。 [class属性を使用した例] <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- .main1 { width:100px;} .main1 h1 { color:red;} .main2 { width:200px;} .main2 h1 { color:blue;} --></style> </head> <body> <div class="main1"> <h1>aaa</h1> </div> <div class="main2"> <h1>bbb</h1> </div> </body> </html> [id属性を使用した例] <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- #main1 { width:100px;} #main1 h1 { color:red;} #main2 { width:200px;} #main2 h1 { color:blue;} --></style> </head> <body> <div id="main1"> <h1>aaa</h1> </div> <div id="main2"> <h1>bbb</h1> </div> </body> </html>
お礼
ありがとうございます。どちらでもよいということですね。参考になりました。
補足
ありがとうございます。１回しか使っていないことを示せるというメリット？がありますね。参考になりました。