- ベストアンサー
CSSの部分リセットについて
サイト全体に影響するCSSでtableのボーダーを非表示に指定しています。 ところが、一部分のみCSS無指定状態のtableを表示する必要が出てしまいました。 該当するtableに別クラスを割り当てて、その部分だけを個別に指定しようと思いましたが、実際見てみると、CSS無指定状態とは微妙に見た目が異なってしまいます。 ＝＝＝＝CSS内容＝＝＝＝ table { border: 0px none; } td { border: 0px none; border-collapse: collapse; } /*普通にtableを書くとボーダーが消えてしまうので個別に指定*/ .reset table{ border: 3px ridge; } .reset td{ border: medium ridge; border-collapse: collapse; } ＝＝＝＝HTML＝＝＝＝ <div class="reset"> <table> <tr> <td>ああああああ</td> <td>ああああああ</td> </tr> <tr> <td>いいいいいい</td> <td>いいいいいい</td> </tr> </table> </div> 元のtableの指定はサイト全体に影響が出てしまうため、修正することができません。 いまさらながらものすごく後悔していますが・・・。 また、今後の使いまわしを考えると、IDの指定もできません。 無理矢理何とかできないかと思い、上記の方法を取りましたが、やはりうまくいきません。 理想としては、指定した箇所のみCSSの影響がなくなるということですが、いろいろ調べても見つかりませんでした。 根本的に作り直しした方がいいのは理解していますが、何か方法があればと思い質問させていただきました。 どなたか良い案がありましたらお助けください。
- yasagure-kun
- お礼率81% (27/33)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
多分色を完全に CSS 未指定状態と同一にすることは不可能でしょう。 ただ、未指定状態へと可能な限り近づけることならば可能です。 .reset table,td{ border: 3px outset; } .reset td{ border:1px inset; border-collapse: collapse; } 上記の CSS を指定されたテーブルは、下の HTML に似た表示状態になりました。 （上の CSS を下のテーブルに指定するという意味ではないので注意） Gecko エンジンを使用したブラウザでは枠線の色が若干違うものとなりましたが、 IE と Opera では未指定状態と同じスタイルで表示されることを確認しました。 <table border="3"> <tr> <td>ああああああ</td> <td>ああああああ</td> </tr> <tr> <td>いいいいいい</td> <td>いいいいいい</td> </tr> </table>
その他の回答 (4)
- NTJ
- ベストアンサー率44% (46/103)
あの・・・物凄く馬鹿げた回答なのですが。。。。 .reset table{ border:; } .reset td{ border:; border-collapse:; } コレじゃダメでした？
お礼
残念ながらダメでした。 多分先に規定したborderとborder-collapseが生きてるようです。 tableタグ内でいくらborderを指定しても枠が表示されませんでした。
補足
やはり部分的にCSSを無効化することは無理そうなので、#1さんの方法でしのぐ事にします。 ご回答くださった皆様、ありがとうございました。
- sakura_394
- ベストアンサー率33% (2/6)
ごく一部だけ変更したい、ということでしたらやはりその部分にだけIDをふってCSSに書き加えるのがいい気がします。 これだとその部分のみ変更することが出来ますし、IDを変更すれば使い回しも聞くと思うのですが、いかがでしょう？ <html> <head> <title>test</title> <style type="text/css"> <!-- /*通常のテーブル*/ table { border: 0px none; } td { border: 0px none; border-collapse: collapse; } /*ボーダー指定したい場合のみ*/ #reset table{ border: 3px ridge; } #reset td{ border: medium ridge; border-collapse: collapse; } --> </style> </head> <body> <table> <tr> <td>ああああああ</td> <td>ああああああ</td> </tr> <tr> <td>いいいいいい</td> <td>いいいいいい</td> </tr> </table> <div id="reset"> <table> <tr> <td>ああああああ</td> <td>ああああああ</td> </tr> <tr> <td>いいいいいい</td> <td>いいいいいい</td> </tr> </table> </div> </body> </html>
お礼
idを指定してしまうと、都度CSSを修正する必要があるので、避けたかったのです。 特定多数の人間が書き込みをするフォーラムで、テキストエリアにタグを貼り付けていると思っていただければ近いかな。 丁度ここのように、書き込んだ文中にテーブルを入れたいというケースです。 そこで、テーブルを使いたいのなら、○○を書き加えてくださいという流れにしたかったので。 通常のサイトであれば、id指定した方が後々は楽ですね。 参考にさせていただきます。ありがとうございました。
- chrow
- ベストアンサー率37% (11/29)
IEでしか確認していませんが、テーブルにクラス設定するというのはどうでしょう？ table.reset { border: 3px ridge; } table.reset td { border: medium ridge; border-collapse: collapse; } とした上で、 <table class="reset">とすれば、できるのではないかと…。
お礼
すみません。質問の仕方が悪かったようです。 見た目をプレーンなtableにしたいというのが希望なのです。 理想を言えば、指定した箇所のみCSSを無効化してしまうことなのですが・・・。 おっしゃるとおり、tableにクラスを指定した場合でもできるかと思いますが、上記CSSの指定だと全然違う見た目になってしまいますよね。 また、divで囲ってクラスを指定した場合でも、結果的には同じ効果になりましたが、どちらがいいのでしょうか。
- sakura_394
- ベストアンサー率33% (2/6)
classでは完全にCSSの影響をなくすことは無理な気がしますので、やはり指定したい部分だけidを振り分けて指定した方がいいようなきがするのですが。 もしくは無指定のtableを使いたいページだけに別なCSSファイルを指定するくらいしか思いつきませんが、そういうことも出来ない状態なのでしょうか？
お礼
やはり無理でしょうか。 コンテンツのごく一部のみに、プレーンなtableを使いたかったため、ページ単位で別なCSSファイルを使うということはできないのです。 また、今後も頻繁に使用する可能性があったため、遣い回しができた方がいいかなと考えています。 タグのみの指定よりもタグ+classの方が強いと思ったので、大丈夫かと思ったんですが・・・。 あまり複雑な構造ではなく、id単体、もしくはclassのみ使用しています。 ご指摘ありがとうございました。
お礼
ありがとうございました。 insetとoutsetの効果が良くわかっていなかったようです。 確かにGeckoだと微妙に違いますね。 引き続きいろいろ試してみます。