scrollbar-base-colorプロパティ

TOPページに戻る > CSS

スポンサード リンク

scrollbar-base-colorプロパティ

スクロールバー全体の色を指定できます
scrollbar-base-colorプロパティはIE独自のプロパティです。表示を変えられるのはIEのみになります

使い方(書式)

セレクタ { scrollbar-base-color: 値; }                                    

scrollbar-base-colorプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11
適用できる要素 全ての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>
overflowプロパティでスクロールバーを表示し
スクロールバーに色をつけています
IEでスクロールバーの色を確認してください
色が変わっている場所が各プロパティで指定した場所です
IEのみスクロールバーの色を表示できます



(C)2012 ホームページ作成無料