スクロールバーの色(IEのみ)
今回はスクロールバーの色に関してです。 IEでしか使えませんが、他のブラウザーで障害はないので、うまく活用したいですね。
使えるプロパティ
使えるプロパティは次の8つです。
scrollbar-base-color:#??????; scrollbar-3dlight-color:#??????; scrollbar-arrow-color:#??????; scrollbar-darkshadow-color:#??????; scrollbar-face-color:#??????; scrollbar-highlight-color:#??????; scrollbar-shadow-color:#??????; scrollbar-track-color:#??????;
プロパティと見え方の対応は次のようになっています。
サンプル
scrollbar-base-color:#996600;を使うとこんな感じ
目の錯覚?なんとなく気持ち悪い動きです。
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#000000;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#cc9900;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-track-color:#996600;
色をそろえるとこんな感じ
scrollbar-3dlight-color:#996600;
scrollbar-arrow-color:#996600;
scrollbar-darkshadow-color:#996600;
scrollbar-face-color:#996600;
scrollbar-highlight-color:#996600;
scrollbar-shadow-color:#996600;
scrollbar-track-color:#ffffff;
scrollbar-base-colorを使うのが一番失敗が少なくすむと思います。
プロパティをあれこれ指定すると色の調和を取るのが難しいので。
色を変えるときはデザインよりも、使いやすさを優先しましょう。
使いこなすための+α
ページのスクロールバー(一番右端にでるやつ)の色を変えるにはどのタグにスタイルシートを設定すればいいのでしょうか?
答えはhtmlタグです。過去互換でページを書いているときはbodyタグでもいけますが、標準準拠モードでページを書いているときは色が変わりません。
(詳しくは標準準拠と過去互換モード参照)
htmlタグならモードを問わず色が変わります。
html{ scrollbar-base-color:#996600; }