スクロールバーの色を変える

スクロールバーの色を変える

スクロールバーとは以下のようなものです。

このスクロールバーの色を変えることができます。
ただし、インターネットエクスプローラだけで機能します。

以下で解説するものは通常、<body>タグに適用し、
<textarea>にも使うことができます。

スクロールバーの色を変えるのに、いちばん手軽な方法は
scrollbar-base-color:#------;　を使う方法です。

ただし、使う色によってはきれいに表示できません。

<textarea style="scrollbar-base-color:#999999;"
cols="40" rows="4">

</textarea>
　　↓

次は、
scrollbar-base-color:#------;　（基本の色）
scrollbar-arrow-color:#------;　（矢印の色）
scrollbar-track-color:#------;　（余白の色）
の3つを使う方法です。

この3つを使った場合には比較的きれいに表示できます。

<textarea style="scrollbar-base-color:#999999; scrollbar-arrow-color:#ffffff; scrollbar-track-color:#dddddd;" cols="40" rows="6">

</textarea>
　　↓

次は、
scrollbar-face-color:#------;　（表面の色）
scrollbar-arrow-color:#------;　（矢印の色）
scrollbar-track-color:#------;　（余白の色）
scrollbar-3dlight-color:#------;　（外側の明るい色）
scrollbar-darkshadow-color:#------;　（外側の暗い色）
scrollbar-highlight-color:#------;　（内側の明るい色）
scrollbar-shadow-color:#------;　（内側の暗い色）
の7つを使う方法です。

この方法では、全ての場所の色を指定するので、
自分の好きなデザインのスクロールバーを作ることができます。

ただし、色の指定が少し大変です。
7つもありますからね。

<textarea cols="40" rows="6" scrollbar-face-color:#ffffff; scrollbar-arrow-color:#999999; scrollbar-darkshadow-color:#ffffff; scrollbar-3dlight-color:#999999; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#999999; scrollbar-track-color:#ffffff;>

</textarea>
　　↓

次は　スクロールバーの表示のコントロール　です。

メニューに戻ります。