ユーザースタイルシートで文字色、背景色が変更できない

質問

以前も同様の質問をしたのですが、題名と内容がわかりづらかったのでもう一度質問させていただきます。

Internet Explorer7、Firefox3でユーザースタイルシートを使い、ウェブブラウジング中に文字色と背景色を変更したいと思います（WindowsXP sp2です）。
それで以下のようなcssを書きました。

－－－－－－－－－－－－－－－－－－－－－－ここから
html head+body {
color: #464646 !important;
color: #464646 !important;
color: #464646 !important;
background-color: #cdcdcd !important;
background-color: #cdcdcd !important;
background-color: #cdcdcd !important;
background-image:none !important;
background-image:none !important;
background-image:none !important;
}

td {
color: #464646 !important;
color: #464646 !important;
color: #464646 !important;
background-color: #cdcdcd !important;
background-color: #cdcdcd !important;
background-color: #cdcdcd !important;
background-image:none !important;
background-image:none !important;
background-image:none !important;
}
－－－－－－－－－－－－－－－－－－－－－－ここまで

これをユーザースタイルシートとして指定すると、色が変更できる場合もありますが、
サイトよっては一部の色が変更されません。

（例）
大部分の色が変更できるサイト
http://www.kuronekoyamato.co.jp/

一部しか色が変更できないサイト
http://www.yahoo.co.jp/
http://www.4gamer.net/

結果はIEとFirefoxで少し違いますが、色が完全に変更できない点は同じです。

色を完全に変更するには、どういう記述をすればよいのでしょうか？
それとも、ユーザースタイルシートではそういうことはできないのでしょうか？

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

> 色を完全に変更するには、どういう記述をすればよいのでしょうか？
*{ color: #464646;}

p{}だけ指定しても、 <p><span></span></p> となっていれば、
もっとも内側にあるタグ（span）のセレクタが適用されます。
ユーザー定義でspanを指定していなければ、ページ制作者が作ったspanの色が適用されます。

個別に指定するのなら、数はこれだけあります。
http://www.w3.org/TR/html401/index/elements.html
これに加えてblink、marquee、ruby、rt、rp、rd、layer、ilayerまで全部指定しておけば、まぁ、たいていのページで色を変えられるんではないかと。

福祉施設の複数のパソコンにまとめてインストール＋セットアップとかでなければ、
FirefoxやIEならブラウザの色設定でできるので、そっちでやる方がいいと思います。

> 同じ記述を重ねると優先順位が上がると回答を頂いたのでそうしてみました。
同じ記述、というのがよくわかりませんが、こういうことでしょうか。

p span{}
p{}
span{}

span{} よりも p span{}が優先となります。
（一般的に言われる「優先順位」はここまでしか説明されないと思います）

ページ指定スタイルシートとユーザー定義スタイルシートを併用した場合は、
ページ指定スタイルシートp span{}よりも、ユーザー定義スタイルシートのspan{}の方が優先され、
ユーザー定義スタイルシートのp span{}が最優先となります。

お礼

ご回答ありがとうございます。

> *{ color: #464646;}

こ、これは……
Firefoxで指定したところ、背景色と文字色どころかサイドバーやメニューまで、タイトルバー以外のすべての色が変更できてしまいました。

ただブラウザの色設定もそうなんですが、画面全体が同じ色になってしまうとあまりに無味乾燥で見づらいので、bodyやtdなどで別の配色を指定したいのです。
（今回の質問ではどれも同じ色にしてましたが）
ちなみに、FirefoxのStylishという手軽にユーザースタイルシートを切り替えられるアドオンを使用し、背景色が白で文字色が黒という自分にとってまぶしいサイトを見るときだけ色を変更する、という使い方をします。

それで、例えばウェブページのtdの中に別のタグがあってそこで色を指定していたとしても、ユーザースタイルシートでtdの色を指定すればそれが反映されると思っていたのですが、そうではなく、タグごとに個別に色を指定する必要があるということですね。

> 同じ記述、というのがよくわかりませんが、こういうことでしょうか。

自分はcssの知識はあまりないので、回答をくださった方はそういう意味で書かれたのかもしれません。

回答No.2

tenderfeel

＞背景色は変わっているのに文字色がそのままの部分があったりします。
ヒント：fontタグ・ユニバーサルセレクタ

＞前回の質問で、同じ記述を重ねると優先順位が上がると回答を頂いたのでそうしてみました。
＞効果はないんでしょうか？

無いですね。
上の解決にも繋がる話ですが、CSSファイル内での優先順位は
セレクタやimportantで決まります。

たとえば、
a {color:red;}
よりも、そのaタグを含む親要素を指定し
td a{color:red}
とする方が優先順位が上がります。

参考URL：

http://tenderfeel.xsrv.jp/css/75/

お礼

ヒントではなく回答を頂きたいと思います。

回答No.1

tenderfeel

!important付きスタイルシートの場合、
優先順位はブラウザ使用者が作成したＣＳＳが最高となります。

具体的には次のようになります
1. Webブラウザ使用者が作成したCSS（!important有）
2. Webページ製作者が作成したCSS(!important有）
3. Webページ製作者が作成したCSS
4. Webブラウザ使用者が作成したCSS
5. WebブラウザのデフォルトCSS

ざっと見たところ、クロネコヤマトのサイトはテーブルレイアウトで
サイト管理者が作成したＣＳＳにＴＤのスタイルが無いので、
ユーザースタイルシートに記載したＴＤのスタイルは適用されます。

一部しか反映されないサイトはXHTMLコーディングなので、テーブルそのものが殆どありません。
隣接セレクタ（head+body）はＩＥ未対応です。
ユーザスタイルシートで使えるプロパティやＣＳＳはブラウザによって異なります。
また、スタイル優先順位で負けてると反映されないと思います。

プロパティ３つ並べても適用されるのは一番最後の１つだけですが
何か意味あって書いてあるのでしょうか？気になります。

http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html
http://firefox.geckodev.org/index.php?%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BCCSS%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA

お礼

ご回答ありがとうございます。
普段はFirefoxを使っているので、Firefoxに絞りたいと思います。

> 一部しか反映されないサイトはXHTMLコーディングなので、テーブルそのものが殆どありません。

XHTMLについてはほとんど知識がないので、具体的にどういう記述をすればいいのか教えて頂きたいのですが……
Yahoo!のソースを見ると、tdの代わりにdivで書いてあるようなので、

―－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
div {
color: #464646 !important;
background-color: #cdcdcd !important;
background-image:none !important;
}
―－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

という記述を追加したところ、大部分の色が変更できました！
あとthも追加しました。

ただ、まだ完全ではなくて、
http://www.watch.impress.co.jp/game/
などを見ると、背景色は変わっているのに文字色がそのままの部分があったりします。
これはまたおいおい調べていきたいと思います。
（情報求みます）

> プロパティ３つ並べても適用されるのは一番最後の１つだけですが
> 何か意味あって書いてあるのでしょうか？気になります。

前回の質問で、同じ記述を重ねると優先順位が上がると回答を頂いたのでそうしてみました。
効果はないんでしょうか？