- ベストアンサー
class属性とdivの違い、ボックスの表現とは
- div要素についてクラス属性を使用せずにボックスを表現しているが、正しく表示されているのか疑問がある。
- 他の人が異なる表現方法をしている理由や、class属性がボックスを表現するための正しい方法なのかについて疑問がある。
- div要素のみを使用してページを構成しているが、部分的な分割が問題なのかを知りたい。
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
＞1. これはボックスなのですか。 ボックスという言い方が混乱の一要因になっている気がします。 divはブロックレベル要素です。 ブロックレベル要素は、ひとつのまとまりとして振る舞うので結果的にボックス状になります。 ブロックレベル要素にはid名を指定することも、class名を指定することも、両方同時に指定することも出来ます。 インライン要素も同様にid、classの指定が出来ます。 idとclassの使い分けに関しては、class=分類名、id=個別名というような定義はありますが、コラムはclassとしろだとか、本文はidにしろといった細かい規定はありません。 例えば、1年1組の田中君の場合、1年1組というclassの中の田中君というid、という見方が出来ると思います。 しかしさらに掘り下げた場合、田中君を人間というclassとしてとらえ、人間というclassの中にある頭というidという見方も出来ます。 逆に田中君をあくまで個人、すなわちidとする場合、田中君というidが頭というclassを持っているとも言えるのではないでしょうか。 結局視点をどこに置くかでものの見方は変わってしまうわけだから、私は深く考えず個人的な判断で臨機応変にその都度使い分けています。 ちなみに私の個人的な判断だと topのもとにある、left、center、right。これは全部idとします。 コラムのもとにある、タイトル、本文。これはコラムがidで後はclassかな。 menuのもとにある、button1、button2、button3は、menuだけclassで後はid。 全身のもとにある、頭、胴、足は全身がclassで後はidですかね。 最後に表示が狂う問題ですが、私の環境はMacなのでSafariとFirefoxでのみの確認ですが問題なかったので分かりません。
その他の回答 (7)
- UKY
- ベストアンサー率50% (604/1207)
えーっと、確かに No.2 の補足に四つ質問がありますが、(今回はあえてはっきり言わせてもらいますが) どれも意味不明でとんちんかんな質問です。あんな質問で「質問の意味が伝わ」るわけがありません。 なぜとんちんかんな質問をしてしまうのかといえば、基礎が理解できていないからです。基礎が分かっていないから、自分がとんちんかんなことを言っていることに気付かないのです。だから、とにもかくにもまずはしっかり基礎を勉強してくださいといっているのです。 id と class についての話をしている最中に「ボックス」がどうこうなどと言い出したことから察するに、質問者さんはそもそも「HTML とは何か」「CSS とは何か」という基礎的な点について理解が不十分であるように思われます。HTML とは何かを十分に理解しないまま具体的な HTML の書き方について質問しても、実りは少ないでしょう。
- goldfox
- ベストアンサー率49% (123/249)
idはそれをつけた要素の固有名詞だと考えてみてください。 id="topbanner"＝たろさん たろさんを呼び出したいな、と思ったら <a href="#たろさん">飛ぶ</a> で呼び出すことができます。 JavaScriptでたろさんの文字色を変えたいなと思えば onclick="たろさん.style.color='#000000'" で変更することが可能です。 ただし、1ページ内に同じ名前が複数あるとどの名前に反映すればいいのか分からず、エラーになります。 cssのidセレクタは、idにcssで装飾をつけるのです。 ですからidが付いた場所以外には反映されないし、css以外の方法にエラーを出さないために、複数の同idはあってはいけません。 classセレクタはセレクタに対し指定された装飾をclass=""で「呼び出す」と考えていいと思います。 <div id="top"> <div id="left">左</div> <div id="center">中</div> <div id="right">右</div> </div> top のもとにある、left、center、right は id なのですか、class なのですか。 id="～"なのですから当然idです。 classで付けたければclassに変更すればよいと思います。ただしJavaScriptやラベルリンクなどには当然使えません。 「コラム」のもとにある、「タイトル」、「本文」は id なのですか、class なのですか。 こちらは何をさして言っているのか分かりませんが、「分類」ではないですか？ menu のもとにある、button1、button2、button3 は id なのですか、class なのですか。 こちらも何をさして言っているのか分かりませんが、ただの「テキスト」に見えます。 「全身」のもとにある、「頭」、「胴」、「足」は id なのですか、class なのですか。 <head><body><footer>などを指しているのならば、これらは要素です。
補足
残念ながら質問の意味が伝わっていません。 > id="～"なのですから当然idです。 上のタグの話ではありません。 > こちらは何をさして言っているのか分かりませんが、「分類」ではないですか？ ボックスを分かつ場合の話です。 > こちらも何をさして言っているのか分かりませんが、ただの「テキスト」に見えます。 同上。 > <head><body><footer>などを指しているのならば 違います。上に同じです。 真正面からご回答いただける方のそれをお待ち申し上げます。
- awasumi
- ベストアンサー率41% (23/56)
質問者さんが書いている通りに「class id 使い分け」でgoogle検索したら W3C勧告の仕様書にすぐに行き着きました。 仕様書に勝るものはないと思っています。 -------------仕様書から抜粋----------------- 要素識別子: id属性とclass属性 id = name [CS] この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。 class = cdata-list [CS] この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。 幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。 続きは、仕様書を熟読してください。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html.ja.sjis#h-7.5.2
お礼
> 続きは、仕様書を熟読してください。 仕様書は私の疑問に答えてくれません。
補足
No.4 の「お礼」の質問に答えていただけないでしょうか。
- UKY
- ベストアンサー率50% (604/1207)
> 質問に即した回答がほしい 質問に即した回答をすることは可能ですが、こういう初歩的な質問に対して即した回答をしても、結局基礎的な理解が不十分であるがために、同じような質問が繰り返しなされることが多いのです。 例えば「1 + 2 の答えは何ですか」と聞かれて「3 です」と答えるのは簡単ですが、そうしたら次は「2 + 3 は?」「3 + 4 は?」と同じような質問が繰り返されることは容易に想像できます。ならば最初に「3 です」と答える代わりに「教科書を読んで足し算について勉強してください」と答えたほうがお互いに時間の節約になるのです。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1444936&rev=1 http://deztec.jp/x/01/tips/page/p0045.html http://web.xii.jp/iec/html/memo/id-class http://www.tg.rim.or.jp/~hexane/ach/awht/awht07.htm
お礼
読みました。読んだ上で、どれも No.2 の補足に対する答えを与えていないと思いました。 挑発ではないですが、本当に具体的に指摘できるのであれば、No.2 補足すべてに答えをもらえませんでしょうか。
補足
No.2 の補足に対するご回答をよろしくお願いいたします。
- yambejp
- ベストアンサー率51% (3827/7415)
漢字コードの関係で化けているのかもしれませんね。 テストをするなら日本語は使わないほうがいいでしょう。 （もしくはヘッダを設定して文字コードを指定する） <div id="top"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> 同じような見せ方を文書内で何度も使う気があるなら class・・・ってすごくわかりやすいとおもうんですが 混乱するほどのものでもないんじゃないですか？
お礼
> 漢字コードの関係で化けているのかもしれませんね。 すみません、「グッチャグチャ」に特異的な説明が欠けていました。 左、中、右の文字はきちんと出ているので、日本文字を使ったことによる問題ではないと思います。 配置が狂ったときに見やすいようにそれぞれのボックスを色分けしているのですが、その配置がグッチャグチャなのです。左中右と並んで表示されなくなります。
補足
> 同じような見せ方を文書内で何度も使う ひとつ下にも書きましたが、それは「利便性」の問題ですよね。知りたいのはそういうことではないんです。「id と class は表すものによって使い分ける」らしいので、それを知りたいのです。
- partita
- ベストアンサー率29% (125/427)
＞で表示がグッチャグチャになってしまいました なりませんでしたよ（IE6） ＞もう何が class で何が id なのかわかりません。 classとidの使い分けは人によって様々でしょう。一般的には「ページに複数存在するときはclass」と言われます。それ以外はidで記述してかまいません。 中には、すべてclassで、もしくはidで記述している人もいますが、名称を考えるのが大変だと思います。
補足
> 一般的には「ページに複数存在するときはclass」と言われます。それ以外はidで記述してかまいません しかし、CSS の書法のサイトには、「複数のとき id が駄目」と書いてはありますが、では「複数でない場合 id でよい」とは書いていなく「id と class は表すものが異なるので使い分けなさい」と書いてあるのです。 だから、「（複数でない場合は）一般によいのだよ」ということではなく、使い分けを聞きたいのです。 top のもとにある、left、center、right は id なのですか、class なのですか。 「コラム」のもとにある、「タイトル」、「本文」は id なのですか、class なのですか。 menu のもとにある、button1、button2、button3 は id なのですか、class なのですか。 「全身」のもとにある、「頭」、「胴」、「足」は id なのですか、class なのですか。 それぞれ、よろしくお願いします。
私が、質問文をとんでもない方向に解釈していたことは理解できました。ごめんなさい。しかしながら、読んでもどのようなソースを想定しているのかがわかりません。 (混乱させるかな、と思ったら今後この質問での回答を控えます) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <title>実験</title> <style type="text/css"> .top-left{ width :5px; } .top-center{ width :10px; } .top-right{ width :5px; } </style> </head> <body> <div id="topbanner"> <div id="top-left"> <p>あいう</p> </div> <div id="top-center"> <p>えおかきくけこさし</p> </div> <div id="top-right"> <p>すせそたち</p> </div> </div> <p></p> </body> </html> というソースであっても >If the universal selector is not the only component of a simple selector, the "*" may be omitted. 全称セレクタ"*"(該当する全ての要素を指す)は省略してもよい のはともかく .は http://www.w3.org/TR/CSS21/selector.html#class-html によると、「class属性に対して~=を行うことに等しい」と書かれていますから、id属性に関しては影響がなく、style要素による幅指定を受けないはずです。 idの場合、#の後に、記述することになっています http://www.w3.org/TR/CSS21/selector.html#id-selectors なので、後半の記述に対して何がどう「正しく」表示されているかわからないのです。(喩えfloatが書かれていてもちろん無効) idに対して #top-left{・・・} 等なら有効なはずですが。 1.これはボックスなのですか。 divでなくemにidを付けてみたらうまくいかなかったので (Anonymous boxはclassの影響受けないみたいだし) ・・・・「div(ブロックレベル要素)を書いたから」全称セレクタに引っかかって適用されたんでしょうね 2.セレクタの対応関係が正しければ、表示上の違いはないと思われます。
お礼
まだわけがわからぬ状態ですが、そのままちょっと試してみました。 <div id="top"> <div id="left">左</div> <div id="center">中</div> <div id="right">右</div> </div> #top { margin: 0px; padding: 0px; width: 800px; height: 100px; } #top #left { background: #FF0000; float: left; margin: 0px; padding: 0px; width: 200px; height: 100px; } #top #center { background: #00FF00; float: left; margin: 0px; padding: 0px; width: 400px; height: 100px; } #top #right { background: #0000FF; float: left; margin: 0px; padding: 0px; width: 200px; height: 100px; } できちんと体裁が横並びになっていたものが <div id="top"> <div class="left">左</div> <div class="center">中</div> <div class="right">右</div> </div> #top { margin: 0px; padding: 0px; width: 800px; height: 100px; } #top .left { background: #FF0000; float: left; margin: 0px; padding: 0px; width: 200px; height: 100px; } #top .center { background: #00FF00; float: left; margin: 0px; padding: 0px; width: 400px; height: 100px; } #top .right { background: #0000FF; float: left; margin: 0px; padding: 0px; width: 200px; height: 100px; } で表示がグッチャグチャになってしまいました（IE、Firefox、Opera）。 テスト用に新規に書いたので、上下とも同じ id も同じ class も含まれていませんし、これ以外の指定はありません。 私が変えたのではなく、プログラムが自動的に書いたのですが、これは class を使うのがおかしいという印＝証拠でしょうか。 もう何が class で何が id なのかわかりません。
補足
回答いただいていることに恐縮しますが、私が他の人の質問を含み見ていて感じるのは、やたらと「まず下のサイトでも読んできてください」「（検索エンジンや辞書というものが存在するので）言葉くらいは自分で調べてください」という回答です。 こういうここのような掲示板について考えてみました。何人かが共通して抱く疑問ではなく、少なくとも質問する本人にとっては「自分だけの質問（not疑問）」なわけです。だから、質問に即した回答がほしいのです（できれば正解がほしいけど、この際正誤は問いません）。 繰り返しになりますが、具体的にいいますと、 ＝＝＝ たとえば top というものが左・右・真ん中に分かれているとすると、それぞれ 3 つは class なんですか？ id なんですか？ ＝＝＝ ということです。期待して＊いない＊答えは、ご紹介サイトにある「id は一回しか使えない・class は＊まさに＊分類です」とか「id は正体、class は分類という意味から当然わかりますよね？」などなどということなのです。 真ん中・右・左は「分類」ですか。でも、それぞれ一回しか現れないのなら、id でもよいのですか。さらに、そういう区別は正しいのですか。 また、div＝ボックス ではないのですか。でも、他のエレメントでもボックスは作りますよね。では、ボックスを作るのは何でしょう。
補足
すべての中で最も明確な回答をいただきました。 ありがとうございます。