- ベストアンサー
なぜ『table td』など親まで書く必要があるの
- 『table td』など親まで書く必要がある理由や経緯について詳しく説明します
- 親要素を省いて書くと不具合が起こる可能性や、読み返しやすさを考慮して親まで書く慣例があることについて解説します
- 『table td { background-color: #ffffff; }』という記述がどのように解釈されるのか、親まで書く必要がある理由を明確にします
- CSS
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ルール的な理由は先の回答者に譲りますが。。。 記述する時は「#id 要素」みたいな書き方をするケースは多いと思います。 理由としては「idをつけた方がどの要素の箇所なのかわかりやすい」ということ、 そして、「適用の優先度」の問題があります。 たとえば、 td { background-color:#ffffff; } よりも、親要素を書いた #id td { background-color:#333333; } の方が優先されたりだとか。 (但し衝突しないスタイルは引き継ぐ) あらためて。 どの要素どのスタイルがあたっているなどで混乱しないよう、 そして、仮にぶつかっててもなんとかするために(本当はダメな考え方でしょうねｗ)、です。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞今はあるサイトを見ながらＣＳＳを勉強しているところなんですが、そちらの説明によると親が決まりきってる場合はこのように書くことになってるとのことでした。 そんな、とんでもないサイトなんかで勉強しようとするから上達しない。HTMLを学ぶときは、HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )を見たように、CSSを学ぶならCSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )を見なければ・・・ tdなどはタイプセレクタです。 table td は、基点となるセレクタにタイプセレクタ、それに子孫セレクタ(半角スペース)でtdタイプセレクタが連なっていますから、詳細度は0,0,0,2になります。 本来は、tableには一つ以上のtbody要素があるべきですから、table tbody td{}とかになります。 ※tbodyは、thead,tfootがなく、一つだけの場合は省略は出来ます。 ※将来、thead,tfootを使う可能性があれば、書いておきます。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから ・TBODY開始タグは、表が本体をただ1つだけ含んでいてヘッダもフッタも含まないという場合を除き、常に必要である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2.3 )］より 具体的な例で・・ td{background-color:red;}/* tdはすべて背景色赤。詳細度[0,0,0,1] */ なのだが、この文書に限り、背景を黄色にしようなら table td{background-color:yellow;}/* 詳細度[0,0,0,2] */ ただし、コーヒーの消費量の表だけは背景をlimeにしよう。 table[summary="コーヒーの消費量"] td{background-color:lime;}/* 詳細度[0,0,1,2] */ ３行目以降は緑 table[summary="コーヒーの消費量"] tr+tr+tr td{background-color:green;}/* 詳細度[0,0,1,5] */ これだと、記載順に関係なく指定された色になりますね。 このセレクタ、カスケーディングの仕組みは、カスケーディングスタイルシートの根幹といえる重要な仕組みです。だから仕様書でもプロパティより先に説明されている。 5 セレクタ 6 プロパティ値とカスケーディング、継承の割り当て Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html#minitoc ) HTML4.01以降、『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』となり、HTMLには文書構造しか書きません。その文書構造に基づいてCSSでは、スタイルを適用する要素をセレクタで指定して行きます。そのためHTMLもスタイルシートも、とても簡単でわかりやすくなります。 例えば p{text-indent:1em;line-height:1.6em;margin:0;} /* p段落要素は、マージン0で行高さ1.6emで先頭は一文字字下げ */ div.figure p{text-indent:0;text-align:center;} /* 挿絵のないの段落は画像なのでtext-indentは0 */ div.figure div.figcaption p{text-indent:0;text-align:center;} /* しかし、その説明は一文字下げる */ とスタイルシートが書いていけますし、誰が見ても分かる。 HTMLは、多分次のように書かれている。 <body> <div class="header">この文書のヘッダ</div> <div class="section"><!-- この文書の本文 --> <h2>本文見出し</h2> ・・・・ <div class="figure"><!-- 挿絵figure --> <p><img src="" width="" height="" alt=""></p> <div class="figcaption"> <p>山中湖から見た富士山</p> </div> </div> ※DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) デザイン(スタイルシート)のためにHTML書かないから分かりやすくなる。 なお[HTML5]なら <body> <header>この文書のヘッダ</header> <section><!-- この文書の本文 --> <h2>本文見出し</h2> ・・・・ <figure><!-- 挿絵figure --> <p><img src="" width="" height="" alt=""></p> <figcaption> <p>山中湖から見た富士山</p> </figcaption> </figure> この場合 p{text-indent:1em;line-height:1.6em;margin:0;}/* 詳細度[0,0,0,1] */ figure p{text-indent:0;text-align:center;}/* 詳細度[0,0,0,2] */ figure figcaption p{text-indent:0;text-align:center;}/* 詳細度[0,0,0,3] */ 単純な場合は、td{}と書いてもtable td{}と書いても、結果はまったく同じですが、このように詳細度を理解して使い分けをします。 それによって『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』に書かれていることが実現できるのです。 変なサイトを見てもほとんど意味無いです。まずは仕様書を読んでみましょう。すべて懇切丁寧に説明されています。
お礼
ご回答ありがとうございます。 すみません、さっぱり理解できませんでした。 初心者なんで仕様書のようなものは、言い回しがくどくて理解できないんですよ。 変なサイトでも噛み砕いで優しく教えてくれるところの方が、自分にとっては懇切丁寧と判断します。
- ambriel
- ベストアンサー率51% (65/127)
td { background-color: #ffffff; } でも特に問題はないし、公式文書でもふつうにtd単品の記述が使われてますが… http://www.w3.org/TR/CSS2/tables.html あえて理由を考えてみると、テーブルはセルごとでなくテーブルごとに用途を決めることが多いので、例えば「ここのテーブルの情報だけは重要だから強調したいな」なんて時にtableタグにclassなりidなりを付けての管理に移行しやすいから、とか。 table.jyuyou td { font-weight:bold; background-color:#ffff00; } <table class="jyuyou"> ○○○ </table>
お礼
ご回答ありがとうございます。 一応、単体でも問題なさそうですね。
お礼
ご回答ありがとうございます。 あ、なんとなく分かる気がします。 作り続けているうちに、ちゃんと分けておかないとぶつかることが出てくるのかもしれませんね。 この辺、とりあえず作ってみないと理解できないのかもしれません。