ブラウザのスクロールバーの色を指定する

scrollbar-xxx-color

CSSの書き方

scrollbar-xxx-color:値 ;

CSSの詳細情報
プロパティ名 scrollbar-xxx-color 読み方 スクロールバー・カラー
初期値 auto 意味 スクロールバーの色を変える
カラー指定
対象 スクロールバーが表示される要素
CSSレベル IE独自 対応ブラウザ Windows MAC
継承 する IE 5.5以上

解説

「scrollbar-xxx-color」プロパティは、ブラウザの画面の横に表示されているスクロールバーやスクロールバーが表示される要素などでスクロールバーの色を詳細に変えることができます。

「xxx」の部分には、色を変えることのできるスクロールバーのパーツ名が入ります。

ただし、InternetExplorer5.5以上独自のプロパティですので、他のブラウザには対応していません。

パーツ名

「scrollbar-xxx-color」プロパティで指定できるスクロールバーのパーツ名は以下の表のようになっています。

xxxの部分 スクロールバーの位置
3dlight バーと行移動用の四角いパーツの上と左の辺
arrow 上下左右の矢印パーツ
base スクロールバー全体の基本色
darkshadow バーと行移動用の四角いパーツの下と右の辺
face バーの表面
highlight バーのハイライト部分
shadow バーの影の色
track レールの色

「scrollbar-xxx-color」プロパティの値はカラー指定です。詳しくはこちらを参照してください。

画面のスクロールバーを変える

ブラウザのページ画面のスクロールバーの色を変えたい場合は、html要素とbody要素にこのプロパティを指定してください。

CSS/HTMLサンプル

html,body { scrollbar-base-color:#ffdff9; scrollbar-arrow-color:red; }

ページ画面のスクロールバーの基本色を変更 サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!