Web デザイン

XHTML＆CSSの膨大なノウハウを定番テクニックとして大集成！

XHTML＆CSS 定番テクニック大全

Technique:161 スクロールバーを独自の色で表示したい

scrollbar-face-colorやscrollbar-arrow-colorプロパティを利用すると、スクロールバーのスライダーやスクロールアロー（矢印）など、各部分の色を詳細に指定することができます。ページの色に合わせて色を指定して、スクロールバーもデザインの一部にしてみましょう。ページのスクロールバーの色を指定するには、body要素にscrollbarプロパティを適用します。
なお、scrollbarプロパティはWindows版Internet Explorerの独自拡張機能です。

	CSS		XHTML
	body{ background-color:red; scrollbar-face-color:black; scrollbar-arrow-color:white; scrollbar-track-color:yellow; } h2{ color: #FFFFFF; （以降省略）		<body> <h2>プロローグ</h2> <p> 飛行機の外には、ほとんど光らしいものが見えない。<br />（中略）色が目に焼きついた。 </p> </body>

ページのスクロールバーの色を指定するには、スタイルをbody要素に適用します。テキストボックスに表示されているスクロールバーの色は、スタイルをtextarea要素に適用して変更できます。

構文

1 {
background-color:2;
scrollbar-face-color:3;
scrollbar-arrow-color:4;
scrollbar-track-color:5;
}

1：セレクタ　2：background-colorの値　3：scrollbar-face-colorの値　
4：scrollbar-arrow-colorの値　5：scrollbar-track-colorの値　

スクロールバーの部位の色の指定

プロパティ	値	効果
scrollbar-base-color	カラーコード	スクロールの色をまとめて指定する
	カラーネーム
scrollbar-track-color	カラーコード	スクロールトラックの色を指定する
	カラーネーム
scrollbar-face-color	カラーコード	スクロールスライダーとスクロールアローの背景色を指定する
	カラーネーム
scrollbar-arrow-color	カラーコード	スクロールアローの色を指定する
	カラーネーム
scrollbar-3dlight-color	カラーコード	スクロールスライダーとスクロールアローの外枠の左と上の色を指定する
	カラーネーム
scrollbar-darkshadow-color	カラーコード	スクロールスライダーとスクロールアローの外枠の右と下の色を指定する
	カラーネーム
scrollbar-highlight-color	カラーコード	スクロールスライダーとスクロールアローの内枠の左と上の色を指定する
	カラーネーム
scrollbar-shadow-color	カラーコード	スクロールスライダーとスクロールアローの内枠の右と下の色を指定する
	カラーネーム

スクロールバーの色をまとめて変更する

スクロールバーの色をまとめて変更したい場合は、scrollbar-baseプロパティを利用すると便利です。scrollbarプロパティの値に、目的の色を1つ指定するだけで、その色をメインにした濃淡で他の部分の色が自動的に指定されます。

	Source
	body{ backgroundcolor: red; scrollbar-basecolor: powderblue; } h2{ color: #FFFFFF; （以降省略）

値にメインとなる1つの色を指定すると、自動的に他の部分の色も指定されます。

抜粋元書籍 - XHTML＆CSS 定番テクニック大全

XHTML&CSSの初歩的な使い方から応用まで、170の定番テクニックを集めました！知っているつもりでも、「あれってどうやるんだっけ？」といったことを事典やウェブで調べるのは面倒ですよね。いろんな使い方を急いで調べたいとき、本書はお役に立ちます！ Internet Explorer、Safari、Firefox、Google Chrome、Operaの各最新バージョンにも対応。紙面で紹介しているサンプルデータもサイトよりダウンロードできます！！