ビビッドカラーズ

スクロールバーにカラフルな色をつけよう！

スクロールバーにカラフルな色をつけましょう！
ということでスクロールバーに色をつける方法をご紹介します。（IE限定です）

スクロールバーに色をつけるには
下記のようなスタイルシートを書きます。

html, body {
scrollbar-base-color: #カラーコード;
scrollbar-track-color: #カラーコード;
scrollbar-face-color: #カラーコード;
scrollbar-shadow-color: #カラーコード;
scrollbar-darkshadow-color: #カラーコード;
scrollbar-highlight-color: #カラーコード;
scrollbar-3dlight-color: #カラーコード;
scrollbar-arrow-color: #カラーコード;
}


面倒！という人はサンプルいろいろ作っておきましたのでこちらをお持ち帰りください♪
CSSにそのままコピペするだけでOKですよ♪

html, body { scrollbar-base-color: #ECE9D8; scrollbar-track-color: #ECE9D8; scrollbar-face-color: #C8A67B; scrollbar-shadow-color: #956A37; scrollbar-darkshadow-color: #956A37; scrollbar-highlight-color: #EDDFCD; scrollbar-3dlight-color: #EDDFCD; scrollbar-arrow-color: #EDDFCD; }

html, body { scrollbar-base-color: #FFF4FC; scrollbar-track-color: #FFCAED; scrollbar-face-color: #FFCAED; scrollbar-shadow-color: #FFACE2; scrollbar-darkshadow-color: #FF80D2; scrollbar-highlight-color: #FFDDF3; scrollbar-3dlight-color: #FFE8F7; scrollbar-arrow-color: #FFFFFF; }

html, body { scrollbar-base-color: #FFCF53; scrollbar-track-color: #FFF4D7; scrollbar-face-color: #FFDE86; scrollbar-shadow-color: #FDBF6C; scrollbar-darkshadow-color: #FA9985; scrollbar-highlight-color: #FDF5DF; scrollbar-3dlight-color: #FFFCE8; scrollbar-arrow-color: #FFFCE8; }

html, body { scrollbar-base-color: #79DEFF; scrollbar-track-color: #D8FBFE; scrollbar-face-color: #79DEFF; scrollbar-shadow-color: #35CDFF; scrollbar-darkshadow-color: #00A9E1; scrollbar-highlight-color: #BFEFFF; scrollbar-3dlight-color: #E6F9FF; scrollbar-arrow-color: #FFFCE8; }

なお、どのプロパティがどの部分を指定しているのかを知りたい人は
こちらに詳しくまとめてありますので参考に。

スクロールバーに色を付けたい！

自分で好きな色でスクロールバーを作ってみたい!という人は
このサイトで簡単に上記のようなスタイルシートのコードを生成することが出来ます。

IE 5.5 スクロールバー色 CSS 設定ページ