- ベストアンサー
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などでスタイルの継承を調べるとよくわかるでしょう。
お礼
初心者には難しい話ですね。
関連するQ&A
- サイトのテーブルの線が、楽天の広告にも反映してしま
http://allergy.6.ql.bz/tokusyu.htmlのサイトのテーブルの線が、楽天の広告にも反映してしまいます。 tableを使っているせいなのでしょうが、tableにclassをつけてもなぜ他のtableにまで 影響が及んでしまうのでしょうか？ 対処法はありますか？
- ベストアンサー
- CSS
- tableの位置がIEとその他ブラウザでずれる
tableの位置がIEとその他ブラウザでずれます。indexのborderもずれるのですが、どのように対策をすれば良いのでしょうか？ http://allergy.6.ql.bz/tokusyu.html 上記サイトのtableの位置がIEとその他ブラウザでずれてしまいます。 http://css-happylife.com/archives/2007/1025_1325.php 上記のような情報があるのですが、このページの場合どのCSSに入れればよいのでしょうか？ またこれはいったいどんな原理なのでしょうか？ また下記のようにすればIEのバグの問題を解決できると聞いたのですが、これを入れれば解決できるのでしょうか？ *{ margin:0; padding:0; font:normal normal normal 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif; border:none;} font:normal normal normal 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif; この記述の意味は何なのでしょうね？
- ベストアンサー
- CSS
- clearFixについて。
clearFixについて。 回り込んだ最後尾のタグにすべてclass=”clearFix”を付けてやればよいのでしょうか？ http://allergy.6.ql.bz/index.htmlなら<dl class="comment2dl">を<dl class="comment2dl" class=”clearFix”>とすればよいのでしょうか？ http://allergy.6.ql.bz/chiryou.htmlなら<table class="contents1" class=”clearFix”>とすればよいのでしょうか？
- 締切済み
- CSS
- tableの位置がIEとその他ブラウザでずれる
http://allergy.6.ql.bz/tokusyu.html 上記サイトのtableの位置がIEとその他ブラウザでずれてしまいます。 http://css-happylife.com/archives/2007/1025_1325.php 上記のような情報があるのですが、このページの場合どのCSSに入れればよいのでしょうか？ またこれはいったいどんな原理なのでしょうか？ また下記のようにすればIEのバグの問題を解決できると聞いたのですが、これを入れれば解決できるのでしょうか？ *{ margin:0; padding:0; font:normal normal normal 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif; border:none;} font:normal normal normal 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif; この記述の意味は何なのでしょうね？
- ベストアンサー
- CSS
- IEとfoxで見た目が違ってしまいます。
IEとfoxで見た目が違ってしまいます。 http://allergy.6.ql.bz/chiryou.html こちらの 訪問者数などがIEよりfoxのほうがずっと上に行ってしまいます。 なぜなのでしょうか？ 同じHTML、CSSなのになぜなのでしょうか？ tableの大きさがブラウザによって変わってしまうのでしょうか？ ポジションなどで強要して同じにするしかないのでしょうか？
- 締切済み
- CSS
- CSSでテーブルの表示
.table1 { border: 0px #000000 solid; } table1.s1{width: 20px; } table1.s2{width: 40px; } とcssを記述し <TABLE CLASS="table1" CLASS="s1"> ・・・ と行ってもs1,s2の項目が反映されません。 どのようにすればよいでしょうか？
- ベストアンサー
- HTML
- テーブルの線の色が指定できない
テーブルの線の色が指定できないうえ、最後に宣言したスタイルシートが適用されてしまいます。 理由がわかりません。 <style type="text/css"> table, td, th.bordercolor_white { border: 1px white solid; } table, td, th.bordercolor_red { border: 1px red solid; } </style> <table class="bordercolor_white"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> このような文だと、 <table class="bordercolor_white">としているのに、 なぜかテーブルの線の色は、赤になってしまいます。 table, td, th.bordercolor_red { border: 1px red solid; } table, td, th.bordercolor_white { border: 1px white solid; } のように、順番を入れ替えると、最後に宣言した白になります。 なので、<table class="bordercolor_white">の部分は無視されるようです。 二つのテーブルの線の色を用意した場合、 任意でテーブルの線の色を付ける方法をご教授ください。
- 締切済み
- CSS
- テーブルを細線で表示させたい
Dreamweaver8を使用しています。 テーブルを表示させると線が太くでてしまいます。 コードでは次のようになっていました。 <table width="50" border="1" cellpadding="0" cellspacing="0"> ボーダーは1よく低い値を入力できません。 ためしにエクセルのセルを貼り付けると細線で表示されました。 そのときのコードは、 <table cellspacing="0" cellpadding="0" class="excel1"> <tr> <td height="18" class="excel2" width="72" style="height:13.5pt;width:54pt;"> </td> </tr> </table> となっていて非常に複雑です。 テーブルのシンプルな細線はどうやって作成できますか？ よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- ベストアンサー
- HTML
- ｃｓｓで一個のテーブルだけにデザインを反映したい
ｃssの編集で、テーブルすべてに反映されてしまって困っています。 下記は書籍のサンプルを抜粋したものですが、 /*--------------------------- ▼テーブル -------------------------- */ table { background-color:#000033;} th { background-color:#005890; color:#ffffff; } td { background-color:#ffffff; color:#333333; } /*--------------------------- ▲テーブル -------------------------- */ という設定にしたら、すべてのテーブルに反映されました。 このテーブルだけ、という風にしたいのですが、スタイルシート側を どうしたらいいのでしょうか？ ちなみに反映したいhtmlファイルのテーブルのソースは下記の感じなのですが、 div とか postとかをtableの前に持っていけばいい？みたいなところまで 調べてわかっているのですが、まったくの初心者でなかなかうまくいきません。 <div class="post"> <table width="400" border="0" cellspacing="1"> ・・・略・・・ </table> </div>
- ベストアンサー
- HTML
お礼
ありがとうございます。お忙しい中大変ありがとうございました。 点数が高いものが採用されるのですね。 カスケーディングについてよく勉強したいと思いますが、なにぶん知識不足の為もし初心者でもわかりやすいサイトや教科書などがありましたらお教えください。