- ベストアンサー
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で見ています。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
外部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は未検証。
その他の回答 (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"> これに書き換えてみてください。 テストしていないのでデザインが崩れる可能性はありますが、もしかしたらこれで反映されるかもしれないです。
お礼
書き換えてみましたが、特に変化はありませんでした。 デザインが崩れるなどはなかったです。 でも丁寧にアドバイスありがとうございました！ このようなこともあるのだと覚えておきたいと思います。
- steel_gray
- ベストアンサー率66% (1052/1578)
cssが変です。 body,html {←この部分が無いようす プロパティ：値； ・ ・ } みたいにする必要があります。
補足
回答ありがとうございます。 タグのソースが書いてあるサイト様などから <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> こちらも試してみたのですが、反映されません…。
コメントアウトが原因かもしれません。 dtd宣言がxhtmlの場合、style内でもコメントアウトは機能してしまいます。
補足
回答ありがとうございます。 確かにもう一度ソースを見ると最初に <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" と宣言されてました。 今までHTMLしか扱ったことがないのですが、 この場合スクロールバーの色変えはどうやればいいのでしょうか？ 参考になるかわかりませんが 下記の配布サイト様でDLしてきました。 http://www.coolwebwindow.com/ template→個人向け→No.2のテンプレートです。
お礼
できました！ 直接このソースを書いたらIE6でも無事反映されました。 本当にありがとうございました！