スポンサード リンク
scrollbar-base-colorプロパティ
スクロールバー全体の色を指定できます使い方(書式)
セレクタ { scrollbar-base-color: 値; }
scrollbar-base-colorプロパティ
対応ブラウザ | |
適用できる要素 | 全てのhtml要素 |
子要素へのスタイルの継承 | しない |
プロパティの値 | 説明 |
16進数 | #FF9900 #と赤、緑、青の三原色を表す16進数を2桁ずつ並べて色を指定します |
16進数(3桁) | #FF9900を省略して#F90と指定することもできます |
10進数 rgb | 赤、緑、青の三原色を0から255までの10進数で指定
rgb(255, 128, 0) この場合は255が赤の色の指定、128が緑の色の指定、0が青色の指定 |
10進数 rgb % | 三原色のパーセントで指定
rgb(100%, 50%, 0%) この場合は100%が赤の色の指定、50%が緑の色の指定、0%が青色の指定 |
色のキーワード | red、green、blue、pinkなど色をキーワードで指定 |
実際の指定方法
.hoge { scrollbar-base-color: #00FF00; } /* スクロールバーを緑色にしました */
html部分 html要素に指定します。
<html class="hoge">
実際の表示は右のスクロールバーをIEで見てください
スクロールバーの色を部分的に指定するIE独自のプロパティーもあります
scrollbar-3dlight-colorプロパティ
.hoge { scrollbar-3dlight-color: blue; }
scrollbar-highlight-colorプロパティ
.hoge { scrollbar-highlight-color: green; }
scrollbar-arrow-colorプロパティ
.hoge { scrollbar-arrow-color: aqua; }
scrollbar-face-colorプロパティ
.hoge { scrollbar-face-color: yellow; }
scrollbar-shadow-colorプロパティ
.hoge { scrollbar-shadow-color: red; }
scrollbar-darkshadow-colorプロパティ
.hoge { scrollbar-darkshadow-color: fuchsia; }
scrollbar-track-colorプロパティ
.hoge { scrollbar-track-color: olive; }
overflowプロパティで指定した要素のスクロールバーも色を変更できます
.hogescroll { scrollbar-3dlight-color: blue; /* 青色 */ scrollbar-highlight-color: green; /* 緑色 */ scrollbar-arrow-color: aqua; /* 水色 */ scrollbar-face-color: yellow; /* 黄色 */ scrollbar-shadow-color: red; /* 赤色 */ scrollbar-darkshadow-color: purple; /* 紫色 */ scrollbar-track-color: olive; /* オリーブ色 */ overflow: auto; /* 要素にスクロールバーをつけます */ height: 50px; /* 要素の高さを指定 */ }
html部分
<div class="hogescroll"> overflowプロパティでスクロールバーを表示し<br> スクロールバーに色をつけています<br> IEでスクロールバーの色を確認してください<br> 色が変わっている場所が各プロパティで指定した場所です<br> IEのみスクロールバーの色を表示できます </div>