- ベストアンサー
tableについて
http://allergy.6.ql.bz/tokusyu.htmlのサイトのテーブルの線が、楽天の広告にも反映してしまいます。 border：syle-noのようなもので消したのですが、メインのtableにclassをつけてもなぜ他のtableにまで 影響が及んでしまうのでしょうか？ class名を付けても付けていないtableにまで影響が及ぶように仕様で決まっているのでしょうか？ 対処法はありますか？
- CSS
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞初心者には難しい話ですね。 そうかもしれません。私もそうだったような記憶が・・。でも、意外と単純で仕組みを知ればなるほどと言うレベルです。 いつまでも初心者を続けるのは「なん」ですので、早くこのカスケーディングの仕組みを身に付けてください。カスケーディングはCSSの命ですからね。 border：syle-no はありませんから、多分border-style:none;でしょうね。 たとえば、 <style type="text/css"> <!-- body p{color:blue;} p{color:green;} body{color:red;} --> </style> </head> <body> <h1>サンプル</h1> <p>てすと</p> <p>２行目</p> <p>三行目</p> </body> </html> のようなHTMLを書いて、スタイル指定の前後を変えたり、宣言を消したりして、色々試してみてください。 ブラウザは最初にドキュメントツリーをつくります。 body |- h1 |- p ここで親要素(body)で指定されたで指定された色(colorプロパティ)は、継承されるため、その子孫のpに適用されます。 しかし、pで指定されていれば、それが適用されますが body p{color:blue;} p{color:green;} となっている場合、bodyの下位のp・・詳細度は[2]のほうが、単にp[詳細度1]よりも、詳しい書き方がしてあるため、上書きできません。 この詳細度の計算はとても大事なものです。class指定は、ひとつ登場するたびに10ですし、IDは100です。要素(タグ名)は1です。 頑張ってくださいね。 たとえば、スタイルシートを p+p+p{coor:bue;} /* 詳細度 3 */ p+p{coor:red;} /* 詳細度2 */ p{color:green;} /* 詳細度1 */ とか・・。とにかく仕様書を読み、様々に書き換えてテストしてみる。これが面白いかな・・
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞あるtableのCSSが他のtableに影響を与えないような方法がないかということです。 ＞classでグループ名を決めてもすべてのtableに影響が及んでしまします。 ひょっとして HTMLでは、<table class="abc">としてあって、スタイルシートでは、table{border:・・}の指定をしているとか。 この場合、すべてのtableに適用されますね。table.abc{border:none;}とすれば、より高い詳細度ですから優先され、解決します。 また、スタイルシートの場合、table自体のborderとセルのボーダーは区別されますから、tableのborderを消しても、セルのボーダーは残ります。(HTMLとは違う) その場合、table.abc th,tabe.abc td{border:none;}などとセルについても設定の必要があります。現在のborderがtable由来か、セル由来かはborder-collapse:separate;border-spacing:5px;とかを指定すると確認できます。
お礼
ありがとうございます。お忙しい中大変ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞tableを複数使う場合、枠線を作ったらすべてのtableに影響しないようにする方法はないのですかね。 ひとつだけ、HTMLでは、属性で指定された場合 <table border="2"> ・その配下にある<td><th>も適用されます。継承される ・<th><td>にはborder属性はありません。 が、スタイルシートでは継承されません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから border Value: [ <'border-width'> || <'border-style'> || <color> ] | inherit 値: Initial: see individual properties 簡略化プロパティ:それぞれのプロパティを参照 Applies to: all elements 適用：すべての要素 Inherited: no 継承：しない!!!!←★ Percentages: N/A パーセンテージ：利用できない（not available） Media: visual メディア：視覚系(目で見るブラウザのこと) ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ボックスモデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#propdef-border )］より 【可能性1】 ですから、ひょっとして、border:noneとしていても、th,tdに対して指定していない可能性がありますね。 basecss.cssには、 table.table1 { border-collapse: collapse; } の記述がありますが、 【可能性２】 tableにclassを指定したら、スタイルシートで table.abc{border・・} table.abc td,table.abc th{・・・} と指定しないと・・・、他のtableにも適用されます。 【対処】 HTMLのソースに、スタイル属性が書けるなら <table style="border:none;"> <tr> <th style="border:none;"> と書き連ねる手があります。この場合詳細度は1000になりますから、一切外部スタイルシートや<head>内のスタイルシートで上書きは出来なくなりますが、最終手段です。---原則、後日デザインを変更するときHTMLを書き直さなきゃならないので使わない方法です。(CSS2.1で詳細度はa=1,すなわち1000になりました。) [参考] 【CSS2】6.4.3 セレクタの詳細度を計算する（Calculating a selector's specificity） →C.2.3 Section 6.4.3 Calculating a selector's specificity ( http://www.d-toybox.com/spec/CSS2.1/appendixC/#q10 ) firefox+firebugで、表示されている要素に、どのようなスタイルがどういう経緯で適用されているかを調べることが出来ます。 ＞初心者でもわかりやすいサイトや教科書などがありましたらお教えください。 いささか、堅苦しくとっつきにくいですが、まず仕様書を読む癖を付けてください。正確な知識が得られます。 注)現在標準としてみなされているCSS2.1では、CSS2よりの変更があります。特に詳細度の部分
お礼
ありがとうございます。お忙しい中大変ありがとうございました。 属性で指定されたものが最優先されるのですね。 またborder-style:none;で無理やり灰色の線を消すことには成功しました。 疑問なのは同じページにtableが複数あるばあい、あるtableのCSSが他のtableに影響を与えないような方法がないかということです。classでグループ名を決めてもすべてのtableに影響が及んでしまします。
- Questa
- ベストアンサー率48% (13/27)
楽天の広告の線とは、TD要素直下のDIV要素のボーダーのことでしょうか？ もしそうなら、メインのtableに指定したスタイルは影響していません。 <td class="rakutenn" ...> <div style="border:1px solid #0000BB;...> </td>
お礼
ありがとうございます。お忙しい中大変ありがとうございました。 楽天の広告とはスピカココシャンプーとアレルキャッチャーＡＤの事です。こちらのtableにも影響したのでborder-style:none;で無理やり灰色の線を消しました。 ボーダーの青い線の事ではありません。 tableを複数使う場合、枠線を作ったらすべてのtableに影響しないようにする方法はないのですかね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
クラスセレクタの詳細度は、c=1(10)です。タイプセレクタでtable{border:none;}と指定してあっても、より詳細度が高い設定があれば上書きできません。 たとえば #main table{}だと、詳細度はb=1・・・101です。また、div.main table[summary="price"]{}という記述があれば詳細度は c=2,d=2・・22ですから上書きできませんね。 firefox+firebugなどでスタイルの継承を調べるとよくわかるでしょう。
お礼
初心者には難しい話ですね。
お礼
ありがとうございます。お忙しい中大変ありがとうございました。 点数が高いものが採用されるのですね。 カスケーディングについてよく勉強したいと思いますが、なにぶん知識不足の為もし初心者でもわかりやすいサイトや教科書などがありましたらお教えください。