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
外部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)
ちょっと詳しくはわかりませんね・・・
気になる情報として、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
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
コメントアウトが原因かもしれません。
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