CSSテクニック

スクロールバーの色(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;
}

一覧へ戻る


Last Modified 2004-12-08 © きくちゃん 2004 - All Rights Reserved