[新着] Webテンプレートを仮オープンしました
scrollbar-***-color は、スクロールバーの色を指定するプロパティです。
（*** の部分には、base、face、track、arrow、highlight、shadow、3dlight、darkshadow が入ります）
body要素にこのスタイルを設定すると、ページのスクロールバーの色を指定できます。
■全体の色をまとめて指定する場合
body {
scrollbar-base-color: #ff0000;
}
■細かく指定する場合
body {
scrollbar-face-color: #ff8c00;
scrollbar-track-color: #fff8dc;
scrollbar-arrow-color: #ffffff;
scrollbar-highlight-color: #fff8dc;
scrollbar-shadow-color: #d2691e;
scrollbar-3dlight-color: #ffebcd;
scrollbar-darkshadow-color: #8b0000;
}
| scrollbar-base-color | （1）全体の色をまとめて指定 |
|---|---|
| scrollbar-face-color | （2）ボタン部分を指定 |
| scrollbar-track-color | （3）レール部分を指定 |
| scrollbar-arrow-color | （4）矢印を指定 |
| scrollbar-highlight-color | （5）内側のハイライトを指定 |
| scrollbar-shadow-color | （6）内側の影を指定 |
| scrollbar-3dlight-color | （7）外側のハイライトを指定 |
| scrollbar-darkshadow-color | （8）外側の影を指定 |
※各プロパティは単体で使用することもできます。
色の指定についてはスタイルシートの色指定をご覧ください。また、カラーチャートのページで色の組み合わせをチェックすることができます。
【参考】
■使用するセレクタについて
表示モードが「互換モード」の場合はbody要素に指定しますが、「標準モード」の場合はhtml要素に指定する必要があります。
■Operaでの対応について
表示モードが「互換モード」の場合（スタイルがbody要素に設定されている場合）に対応しています。
※Operaのバージョンによっては、ブラウザ側の設定変更が必要だったり？するようです。
■インラインフレームのスクロールバー
インラインフレームのスクロールバーの色を指定したいときは、インラインフレームに読み込まれるページにスタイルを指定します。
■フォームのテキストエリア
ページのスクロールバーの色を指定すると、その色指定がテキストエリアのスクロールバーにも適用されます。テキストエリアのスクロールバーのみをデフォルトに戻したいときは、textarea要素の色指定の値に transparent を指定します。（具体的な指定方法は使用例をご覧ください）
色を同化させすぎると、スクロールバーのつまみの部分が分かりにくくなってしまいます（操作性が非常に悪くなります）。スクロールバーのつまみ部分は、色の濃さを変えるなどして判別しやすくしておきましょう。
■全体を赤系、矢印を白に指定する場合
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
body {
scrollbar-base-color: red;
scrollbar-arrow-color: white;
}
-->
</style>
</head>
<body>
・
・
・
</body>
</html>
▼これをブラウザで見ると次のように表示されます
■標準モード時の指定 + テキストエリアの色をデフォルトに
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
html {
scrollbar-base-color: red;
scrollbar-arrow-color: white;
}
textarea {
width: 300px;
height: 7em;
}
#example {
scrollbar-base-color: transparent;
scrollbar-arrow-color: transparent;
}
-->
</style>
</head>
<body>
<form method="POST" action="example.cgi">
<p>
<textarea name="message1" id="example">
デフォルトに指定
・
・
</textarea>
</p>
<p>
<textarea name="message2">
指定なし（色が適用される）
・
・
</textarea>
</p>
</form>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
