なぜ『table td』など親まで書く必要があるの
- 『table td』など親まで書く必要がある理由や経緯について詳しく説明します
- 親要素を省いて書くと不具合が起こる可能性や、読み返しやすさを考慮して親まで書く慣例があることについて解説します
- 『table td { background-color: #ffffff; }』という記述がどのように解釈されるのか、親まで書く必要がある理由を明確にします
- ベストアンサー
なぜ『table td』など親まで書く必要があるの
例えば、tdに色を付けたい場合 table td { background-color: #ffffff; } というようにすると思いますが、 なぜ 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>
お礼
ご回答ありがとうございます。 一応、単体でも問題なさそうですね。
関連するQ&A
- CSSで<td>の背景色を変えたい。
下のようにTable aaa と bbbがあります。それぞれの<td>要素に マウスがHoverしたときに別々の色に変えたいのですが、これを CSS行うことは可能でしょうか？ <table class"aaa"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> <table class"bbb"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> <td>中には <a hrer="・・・が入っているのですが、 次のように行った場合、リンクアドレスが長くなるとうまく機能 しないようなのです。 table.aaa a:hover{ color: #FFFFFF; background-color: #FF0000; text-decoration: none; padding: 5px; } table.bbb a:hover{ color: #FFFFFF; background-color: #0000FF; text-decoration: none; padding: 5px; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- table要素のtrやtdって・・・
tableタグの要素にtrとかtdってあると思うのですがこれって何の略なんでしょうか？ 後div要素とかもいったい何の略なんだ、と気になって仕方がありません。 こういう語源みたいなのを調べられるサイトとか方法は無いのでしょうか？ 私は毎回英語辞典とかをめくっていますが、どうしても分からないときが多くていろいろ考え込んでしまいます。
- ベストアンサー
- HTML
- スタイルシートの記述について
例えば、文字を黒く、背景色を白くしたい場合ですが、どちらの記述が正しいですか？ (1)は兄が教えてくれたタグの書き方で、(2)はネットで見かけたタグ（CSSについて説明していたサイト）の書き方です。 カッコの違いが気になっています。 ネット検索をしたところ、(2)の形で書かれているほうが多かったです。 今は『<!-->』は、もう古かったりなどして使わない形なのでしょうか。 それとも(2)の『{}』のみの形はCSSとして使う場合なのでしょうか。 (1) <style type="text/css"> <!--P{color:#000000;}--> <!--BODY{background-color:#ffffff;} </style"> (2) <style type="text/css"> p{color: #000000;} body{background-color:#ffffff;} </style">
- ベストアンサー
- その他（インターネット・Webサービス）
- table要素のwidthの解釈
tableタグを使って次のようなことをしたいと考えています。 ・table要素の親はdiv要素 ・div要素にはサイズ(width/height)が指定されており、overflow:hiddenとしてある。 ・table要素にはサイズを指定しない ・td要素にはサイズを指定する →つまり、tableのサイズはtdのサイズで決定する HTML/CSSは次の通りです。 ----------------------------------------------------- div { width: 300px; overflow: hidden; } table { table-layout: fixed; } td { width: 170px; } <div> <table><tr> <td>a</td><td>b</td><td>c</td> </tr></table> </div> ----------------------------------------------------- このコードを「DOCTYPE宣言を書かずに」IE8で開くと、想定通りの表示になりますが、 <!DOCTYPE html>と記述すると、tableの横幅が300pxに詰められてしまいます。 td要素のwidth指定が働かず、親のdiv要素のwidthに無理やり押し込められてしまうようです。 また、FirefoxではDOCTYPE宣言無しでも同様の問題が起きてしまいます。 table内の列数は固定ではないので、tableに対してwidth指定はしたくありません。 何か書き方が間違っているのでしょうか。 あるいは、標準準拠モードの仕様では、そもそもできないことをやろうとしているのでしょうか。
- 締切済み
- HTML
- テーブルの中のリンクにつく枠を消したい
ブログのカレンダーです。背景色のテーブルの中のリンク文字の周りに白い枠線ができてしまいます。枠線の取り方をご教授ください＞＜ ＊HTML＊ <table border="0" cellspacing="1" bgcolor="#ddd"> <tr><td id="calendar_${CALENDAR_CODE}"></td> </tr></table> ＊CSS＊ #calendar table {width: 698px;margin: 0px auto;background: #000000;color: #FFFFFF;} #calendar td {text-align: center;color: #ffffff;} #calendar td a {background: #000000; color: #FFFFFF;} #calendar td a:hover,#calendar td a:active {background: #888888;color: #FFFFFF;}
- 締切済み
- HTML
- TDタグについて
TDタグについて、お聞きしたい事があります。 td.td_data_left{ font-family: "ＭＳ 明朝"; font-size: 11pt; letter-spacing: -1pt; font-style: normal; color: #404040; background-color: #FFFFFF; text-align: left; } <td colspan="3" class="td_data_left" height="20"> あ■■■■■■■■■■い</td> 記載しています。 ■は全角スペースです。 ”あ”と”い”の途中で折り返しが発生するのですが、 折り返しの始めの”い”の文字が先頭から表示されてしまいます。（全角スペースを認識せず） 本来は、 あ■■■■■ ■■■■■い と表示したいのですが、現状、 あ■■■■■ い■■■■■ となってしまいます。 どのように書けばいいのかを教えていただけないでしょうか。
- ベストアンサー
- HTML
- ＴＤタグをスタイルシートを使って綺麗に簡単に書きたい。
二つほど質問があります… 以下のようなcssとhtmlを書きました。 ○stylesheet.css body{background-color:#ffffff} a:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} ○XXX.html <html> <head> <meta http-equiv="text/html" contents="Shift_JIS"/> <link rel="stylesheet" href='../css/stylesheet.css' type="text/css"/> </head> <body> <table border> <tr> <th> </th> <th>XXXXXX</th> <th>XXXXXX</th> <th>XXXXXX</th> </tr> <tr> <th>XXXXXX</th> <td align="right"><a href="###.html">100</a></td> <td align="right"><a href="###.html">525</a></td> <td align="right"><a href="###.html">300</a></td> </tr> <tr> <th>XXXXXX</th> <td align="right"><a href="###.html">10</a></td> <td align="right"><a href="###.html">150</a></td> <td align="right"><a href="###.html">300</a></td> </tr> </table> </body> </html> 質問１ <td>は全て数値で、必ず右寄せ（align="right"）なのですが、 stylesheet.cssの中に書いてしまいたいのです…でも td{align:right} と記述しても右寄せしてくれません…どう書くのが正しいのでしょうか？ 質問２ マウスカーソルをリンクに合わせると文字が反転するようになっているのですが できる事ならtdタグの空白部分も反転したほうが良いと思うのですが td:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} としても駄目で <a href="###.html"><td align="right">100</td></a> とするとリンクが無くなってしまいました… 上手く実行できるようになりますでしょうか？ できればJavaScriptを使いたくないんです… わがままな質問ですが、回答よろしくお願いします。
- ベストアンサー
- HTML
- css(div)の中にtableタグを使うとなぜかcellpaddingがきかない
cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか？また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }
- 締切済み
- HTML
- Tableの枠線（内・外）色を変更
Tableの枠線（内・外）色を変更する場合、 CSSだと、 .Table { border-color:#FFFFFF; } .Table TD{ border-color:#FFFFFF;} .Table TR{ border-color:#FFFFFF;} で変更できますが、 これをJacasvriptで対応するにはどのようにしたらいいのでしょうか？ FireFoxもIEも対応したいと思っています。 BorderColor="#FFFFFF"だけだと、 FireFoxで枠線の外側しか変更できません。 たぶんCSSと組み合わせる必要があると思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- <tr>タグ、<td>タグ
テーブルでレイアウトを行い、htmlで背景色・cssで文字のスタイルを適用する場合、<tr>タグと<td>タグのどちらに記述するのがよいのでしょうか。IEだと大差は無いようなのですが、firefoxやNetscapeで違いが出てくるように感じます（特にfirefox）。 (1)cssで文字スタイルの場合、<table>タグに<table class="text">といった感じで問題ないでしょうか（table内の文字すべてclassがtextの場合）。それともやはり<td>タグひとつひとつにクラス指定した方が良いのでしょうか。 (2)テーブルに背景色を指定する場合、<tr>タグ・<td>タグのどちらに指定するのが良いのでしょうか。
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 あ、なんとなく分かる気がします。 作り続けているうちに、ちゃんと分けておかないとぶつかることが出てくるのかもしれませんね。 この辺、とりあえず作ってみないと理解できないのかもしれません。