space
テクニック:スクロールバーの色を変更する
 
space
ボディタグのスタイルシートを用意する。

スクロールバーの色は、BODYタグのスタイルシートにより変更することができます。そこで、まずはSTYLEタグでスタイルシートを宣言し、続いてBODYタグのスタイルシートを変更するための準備を行います。なお、スクロールバーの色変更が有効となるのはInternet Explorer5.5以降のみであり、Netscapoeでは通常の色のスクロールバーが表示されます。

<STYLE type="text/css">
< !--
body {

}
-->
< /STYLE>

スクロールバーの色を変更する。

スクロールバーの色を変更するスタイルシートは「scrollbar-face-color:」です。色の指定はRGBの16進数を利用するのが一般的ですが、「red」など色の名前により色を指定することも可能です。また、スクロールバーを立体的に見せている光(左と上の部分)と影(右と下の部分)の色は、「scrollbar-3dlight-color:」、および「scrollbar-darkshadow-color:」で指定することができます。

<STYLE type="text/css">
< !--
body {
scrollbar-face-color:#FF0000;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
}
sample-->
< /STYLE>

ベースの色や矢印の色を変更する。

そのほか、スクロールバーのベース色や上下の矢印ボタンの色を変更することも可能です。ベース色を変更する場合は、「scrollbar-base-color:」を、矢印ボタンの色を変更する場合は「scrollbar-arrow-color:」を使って色を指定してください。

<STYLE type="text/css">
< !--
body {
scrollbar-face-color:#FF0000;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-base-color:#FFFF00;
scrollbar-arrow-color:#FFFFFF;
}
sample-->
< /STYLE>

<STYLE type="text/css">
<!--
BODY {
SCROLLBAR-FACE-COLOR: #ffffff; BACKGROUND: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #000066;
SCROLLBAR-SHADOW-COLOR: #000066; COLOR: #777777;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #000099;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff
}
sample-->
</STYLE>

return