scrollbar-***-color: ***;
scrollbar-***-color は、スクロールバーの色を指定するプロパティです。
(*** の部分には、base、face、track、arrow、highlight、shadow、3dlight、darkshadow が入ります)
■基本色だけで指定する場合div.example1 { width: 70%; height: 200px; overflow: auto; scrollbar-base-color: #ff0000; }
■細かく設定する場合div.example2 { width: 70%; height: 200px; overflow: auto; 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)外側の影を指定 |
※各プロパティは単体で使用することもできます。
色の指定については、CSSの色指定をご覧ください。
※このプロパティは、CSS 2では定義されていません。
色を同化させすぎると、スクロールバーのつまみの部分が分かりにくくなってしまいます(操作性が非常に悪くなります)。スクロールバーのつまみ部分は、色の濃さを変えるなどして判別しやすくしておきましょう。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
div {
width: 400px;
height: 150px;
overflow: auto;
background-color: #ffffff;
border: 1px #c0c0c0 solid;
scrollbar-base-color: #ff8c00;
scrollbar-arrow-color: #ffffff;
color: #000000;
}
</style>
</head>
<body>
<div>
<p>スクロールバーの色</p>
...
</div>
</body>
</html>
表示例
スクロールバーの色
スクロール
スクロール
スクロール
スクロール
スクロール
スクロール
スクロール
- サイト内検索