みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSでスクロールバーの色変更

こんばんは、とあるホームページのテンプレート配布サイトから
トップページのテンプレートをDLしました。
規約にはカスタマイズや加工は自由にしてもいいとのことで
自分で色々書き換えていたのですが、スクロールバーの色変えだけが上手くいきません。

そのテンプレート自体はベースの構造を同梱されていた外部ファイルにリンクしていたので、その中身を覗いてみたのですが
スクロールバーに関する記述はあまりよくわからなかったです。

そこで直接指定しようと思い、トップページのソース<HEAD></HEAD>の間に
<STYLE type="text/css">
<!--
scrollbar-face-color:#ffffff;
scrollbar-highlight-color: #C0C0C0;
scrollbar-shadow-color: #C0C0C0;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #C0C0C0;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
}
-->
</style>
と入れたんですが、上手くいきません。今まで一から手打ちでHPを作っていた時はこの方法でいけたのですが…。
OSはXPでIE6で見ています。

投稿日時 - 2009-03-02 21:08:03

QNo.4762935

すぐに回答ほしいです

質問者が選んだベストアンサー

外部CSSにすでにbodyというセレクタが存在してます。
これとなんらかの形で干渉してるのかどうか分かりませんが、
タイプセレクタ(body)ではなくユニバーサルセレクタで適応させてみては?

<STYLE type="text/css">
*{
scrollbar-face-color:#ffffff;
scrollbar-highlight-color: #C0C0C0;
scrollbar-shadow-color: #C0C0C0;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #C0C0C0;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
}
</style>

IE8で見ています。
IE6は未検証。

投稿日時 - 2009-03-02 22:18:00

お礼

できました!
直接このソースを書いたらIE6でも無事反映されました。
本当にありがとうございました!

投稿日時 - 2009-03-02 22:29:19

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

ちょっと詳しくはわかりませんね・・・
気になる情報として、dtd宣言によってscrollbar関係のcssが適用されない場合があるかもしれないというものがありました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

xhtml内の上記のdtd宣言を

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

これに書き換えてみてください。
テストしていないのでデザインが崩れる可能性はありますが、もしかしたらこれで反映されるかもしれないです。

投稿日時 - 2009-03-02 22:00:27

お礼

書き換えてみましたが、特に変化はありませんでした。
デザインが崩れるなどはなかったです。

でも丁寧にアドバイスありがとうございました!
このようなこともあるのだと覚えておきたいと思います。

投稿日時 - 2009-03-02 22:28:30

ANo.2

cssが変です。
body,html {←この部分が無いようす
プロパティ:値;


}
みたいにする必要があります。

投稿日時 - 2009-03-02 21:30:31

補足

回答ありがとうございます。
タグのソースが書いてあるサイト様などから
<style type="text/css">

body {

scrollbar-face-color:#ffffff;
scrollbar-highlight-color: #C0C0C0;
scrollbar-shadow-color: #C0C0C0;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #C0C0C0;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
}

</style>

こちらも試してみたのですが、反映されません…。

投稿日時 - 2009-03-02 21:38:36

ANo.1

コメントアウトが原因かもしれません。
dtd宣言がxhtmlの場合、style内でもコメントアウトは機能してしまいます。

投稿日時 - 2009-03-02 21:20:47

補足

回答ありがとうございます。
確かにもう一度ソースを見ると最初に
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

と宣言されてました。
今までHTMLしか扱ったことがないのですが、
この場合スクロールバーの色変えはどうやればいいのでしょうか?

参考になるかわかりませんが
下記の配布サイト様でDLしてきました。
http://www.coolwebwindow.com/

template→個人向け→No.2のテンプレートです。

投稿日時 - 2009-03-02 21:28:35

あなたにオススメの質問