HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


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

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; }

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