スクロールバーの詳しい作り方 便利で面白いフリーソフトを図解で解説【PC元気生活】
【サンワダイレクト】わけありアウトレット

探し物はここにキーワードを入れて検索してくださいね〜

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


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

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

スクロールバーは、サイトのイメージやカラーに合わせて自由に変更できます。
このページで解説する事柄
1.スクロールバーの構造
2.スクロールバーの色を決める face color
3.基本色より、明るい色2色と、暗い色2色
4.矢の色とトラックの色を決めます。

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

スクロールバーの構造

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

それぞれの色を自分の好きな色に指定することで、あなたのサイトにピッタリのスクロールバーができあがります。
※HTMLには、次のようなスタイルシートコードをHTMLファイルの中にある head要素内 <head>〜</head>タグで囲まれた内側)に記述します。
それでもどこに入れるか悩む人は <Title>〜</Title>のすぐ下へ入れましょう。
<style type="text/css">
<!--
html, body{
scrollbar-3dlight-color:一番明るい部分の色;
:▲の色;
scrollbar-darkshadow-color:深い影の色;
scrollbar-arrow-color:表面の色;
scrollbar-highlight-color:明るい部分の色;
scrollbar-shadow-color:影の色;
scrollbar-face-color:トラックの色;
}-->
</style>

「html, body」 : ウインドウのスクロールバーに対して色を指定したい場合は、このように html 要素と body 要素に対してスタイルを指定します。
でもたくさん色を決めなければなりませんね。
どうしたらいいか、悩んでしまうかもしれませんが、一番最初に決めるのは、
scrollbar-arrow-color:表面の色; です。

スクロールバーの色を決める face color

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

基本色より、明るい色2色と、暗い色2色を決めます。

scrollbar-3dlight-color:一番明るい部分の色;
scrollbar-highlight-color:明るい部分の色;
明るい色2色を決めました。
暗い色2色を決めました。この2色が、
scrollbar-darkshadow-color:深い影の色;
scrollbar-shadow-color:影の色;
になります。
暗い色2色を決めました。

矢の色とトラックの色を決めます。

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

Base Color だけ設定する・・・一番簡単な方法です。

急いでいる時は、基本色だけを決めてもデフォルトのグレーよりはずっといいですね。
左のタグは下のようになっています。
簡単でしょ。
<style type="text/css"><!--
html, body{scrollbar-base-color:#0066CC;
}--></style>
【サンワダイレクト】わけありアウトレット