CSSの部分リセットについて

解決済

質問者：yasagure-kun
質問日時：2006/05/16 20:23
回答数：5件

サイト全体に影響する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の影響がなくなるということですが、いろいろ調べても見つかりませんでした。
根本的に作り直しした方がいいのは理解していますが、何か方法があればと思い質問させていただきました。

どなたか良い案がありましたらお助けください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

No.1ベストアンサー

回答者： noname#19206
回答日時：2006/05/16 22:07

多分色を完全に 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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
insetとoutsetの効果が良くわかっていなかったようです。

確かにGeckoだと微妙に違いますね。
引き続きいろいろ試してみます。

通報する

お礼日時：2006/05/17 11:33

No.2

回答者： sakura_394
回答日時：2006/05/17 09:31

classでは完全にCSSの影響をなくすことは無理な気がしますので、やはり指定したい部分だけidを振り分けて指定した方がいいようなきがするのですが。

もしくは無指定のtableを使いたいページだけに別なCSSファイルを指定するくらいしか思いつきませんが、そういうことも出来ない状態なのでしょうか？

- 0
- 件

通報する

この回答へのお礼

やはり無理でしょうか。

コンテンツのごく一部のみに、プレーンなtableを使いたかったため、ページ単位で別なCSSファイルを使うということはできないのです。
また、今後も頻繁に使用する可能性があったため、遣い回しができた方がいいかなと考えています。

タグのみの指定よりもタグ+classの方が強いと思ったので、大丈夫かと思ったんですが・・・。
あまり複雑な構造ではなく、id単体、もしくはclassのみ使用しています。

ご指摘ありがとうございました。

通報する

お礼日時：2006/05/17 11:43

No.3

回答者： chrow
回答日時：2006/05/17 11:59

IEでしか確認していませんが、テーブルにクラス設定するというのはどうでしょう？

table.reset {
border: 3px ridge;
}
table.reset td {
border: medium ridge;
border-collapse: collapse;
}
とした上で、

<table class="reset">とすれば、できるのではないかと…。

- 2
- 件

通報する

この回答へのお礼

すみません。質問の仕方が悪かったようです。
見た目をプレーンなtableにしたいというのが希望なのです。
理想を言えば、指定した箇所のみCSSを無効化してしまうことなのですが・・・。

おっしゃるとおり、tableにクラスを指定した場合でもできるかと思いますが、上記CSSの指定だと全然違う見た目になってしまいますよね。

また、divで囲ってクラスを指定した場合でも、結果的には同じ効果になりましたが、どちらがいいのでしょうか。

通報する

お礼日時：2006/05/17 12:26

No.4

回答者： sakura_394
回答日時：2006/05/17 13:15

ごく一部だけ変更したい、ということでしたらやはりその部分にだけIDをふってCSSに書き加えるのがいい気がします。

これだとその部分のみ変更することが出来ますし、IDを変更すれば使い回しも聞くと思うのですが、いかがでしょう？

<html>
<head>
<title>test</title>
<style type="text/css">

</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>

- 0
- 件

通報する

この回答へのお礼

idを指定してしまうと、都度CSSを修正する必要があるので、避けたかったのです。
特定多数の人間が書き込みをするフォーラムで、テキストエリアにタグを貼り付けていると思っていただければ近いかな。
丁度ここのように、書き込んだ文中にテーブルを入れたいというケースです。

そこで、テーブルを使いたいのなら、○○を書き加えてくださいという流れにしたかったので。

通常のサイトであれば、id指定した方が後々は楽ですね。
参考にさせていただきます。ありがとうございました。

通報する

お礼日時：2006/05/17 13:43