自分でできる　
スクロールバーの色変更

自分のサイトのデザインや配色とどうもスクロールバーが合わない。そんなあなたの為に、スクロールバーの構造や作り方を詳しく解説しました。

スクロールバーの色を変更

サイトにマッチした１色だけを指定して、シンプルでシックなスクロールバーの作り方を詳しく解説しています。

すぐに使えるスクロールバーのサンプルが大量にあります。

スクロールバーの構造は上図のようになっています。
色はわかりやすいように設定しましたので、あまりカッコよくないですが・・・

それぞれの色を自分の好きな色に指定することで、あなたのサイトにピッタリのスクロールバーができあがります。

※HTMLには、次のようなスタイルシートコードをHTMLファイルの中にある head要素内 <head>～</head>タグで囲まれた内側）に記述します。
それでもどこに入れるか悩む人は <Title>～</Title>のすぐ下へ入れましょう。

でもたくさん色を決めなければなりませんね。
どうしたらいいか、悩んでしまうかもしれませんが、一番最初に決めるのは、
scrollbar-arrow-color:表面の色;　です。

face color　は、サイトの基本色が無難です。
たとえば、PC元気生活なら、基本色はブルーです。

scrollbar-3dlight-color:一番明るい部分の色;
scrollbar-highlight-color:明るい部分の色;

明るい色２色を決めました。

暗い色２色を決めました。この２色が、
scrollbar-darkshadow-color:深い影の色;
scrollbar-shadow-color:影の色;
になります。

暗い色２色を決めました。

矢の色とトラックは白にしました。

完成したスクロールバーです。
色の設定は、順序はどうでもかまいません。
（細かく設定した割には、配色がよくなかったせいもあり、あまり立体的になってませんね。）

急いでいる時は、基本色だけを決めてもデフォルトのグレーよりはずっといいですね。
左のタグは下のようになっています。
簡単でしょ。