スクロールバーに色を指定する。(IE限定)

≪アメブロちょい足しCSS-Indexへ戻る-≫

IE限定なので、FireFoxやGoogle Chromeではノーマルなスクロールバーにしか見えません。

まずはシンプルな指定方法からです。

【記述例】

/*▼▼▼スクロールバーの色指定▼▼▼*/
html,
body{
scrollbar-base-color:#000000;
}

• scrollbar-base-colorの#000000を#ffffffに変えると白、#ff0000に変えると赤になります。
• 色は(0～9)と(a～f)の文字を組み合わせて作る16進数で指定しています。左2桁は赤、中2桁は緑、右2桁は青の色と対応しています。
  ・■…#00ff00
  ・■…#ff6600
  ・■…#c0c0c0
  

色サンプルが必要な方はこちらの記事を参照してみてください。
『文字や背景の色指定について。』

さらに詳細に指定する事も出来ます。

【記述例(左)】

/*▼▼▼スクロールバーの色指定▼▼▼*/
html,
body{
scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-arrow-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-3dlight-color:#000000;
}

【記述例(中)】

/*▼▼▼スクロールバーの色指定▼▼▼*/
html,
body{
scrollbar-track-color:#ffffff;
scrollbar-face-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#999999;
scrollbar-darkshadow-color:#000000;
scrollbar-3dlight-color:#000000;
}

【記述例(右)】

/*▼▼▼スクロールバーの色指定▼▼▼*/
html,
body{
scrollbar-track-color:#aa5555;
scrollbar-face-color:#aa5555;
scrollbar-arrow-color:#772222;
scrollbar-shadow-color:#772222;
scrollbar-highlight-color:#ee9999;
scrollbar-darkshadow-color:#772222;
scrollbar-3dlight-color:#ee9999;
}

• 何がどこの色に対応しているかは、ご自分でご確認ください。説明が長くなってしまうだけなので(´Ａ｀。
  とりあえずコピペして、色指定を弄ってみる事をオススメします。
• 全ての色指定を背景色と同じにすると、スクロールバーが消えたように見えます。(閲覧者としては見難いです。)

色サンプルが必要な方はこちらの記事を参照してみてください。
『文字や背景の色指定について。』

くるくるくるくるスクロールバー。

くるくる少女 /筋肉少女帯

￥200
iTunes
※モバイル非対応

≪アメブロちょい足しCSS-Indexへ戻る-≫