XHTML/CSS・トップ | CSSプロパティ・目次

●スクロールバーに色を付ける(応用編)

scrollbar-base-colorはスクロールバー全体の色を変えるプロパティですが、ほかのプロパティを使って、個別に色を指定することもできます。使えるプロパティは「スクロールバー関連のプロパティ一覧表」をご参照いただくとして、Windows版IE(v5.5〜)しか対応しないのは scrollbar-base-colorプロパティと同じです。適用できる要素はスクロールバーの付いている要素もしくはスクロールバーが設置できる要素です。各プロパティで指定した値としての色は子要素へ継承します。また、body要素にスクロールバー関連のプロパティを適用してスクロールバーの色を変更すると、Windows版IEv5.5とv6.0・v7.0の互換モードでは反映されますが IEv6.0・v7.0 の標準モードではスクロールバーの色が付かないバグがあること、スクロールバーの色を変更すると、WindowsXPの場合はXP調のスクロールバーではなく、クラシックスタイルのスクロールバーとして表示されのは scrollbar-base-colorプロパティのときと同じです。

【textarea要素に適用した場合のサンプル】↓

【CSS】↓

textarea {
  scrollbar-3dlight-color: red;
  scrollbar-arrow-color: black;
  scrollbar-darkshadow-color: maroon;
  scrollbar-face-color: silver;
  scrollbar-highlight-color: white;
  scrollbar-shadow-color: gray;
  scrollbar-track-color: yellow;
}

【HTML】↓

<textarea rows="8" cols="40"> 複数行テキストボックス内に表示される本文(省略)。 </textarea>

【Windows版IEで見たときのスクロールバーを拡大した画像】↓

個別に色を指定したスクロールバーを拡大した画像。

【スクロールバー関連のプロパティ一覧表】↓

スクロールバー関係のプロパティ サンプルの色(変更可) 色が指定される場所 追加コメント
scrollbar-base-color black 一括指定、基本色 ここのWebページのスクロールバーの色として黒を指定
scrollbar-face-color silver パーツの上面(表面)  
scrollbar-track-color yellow ツマミ(ノブ)の下の床の部分 レールの部分
scrollbar-arrow-color black ▲▼のアロー(矢印)の部分 スクロール・アローの矢印の部分
scrollbar-highlight-color white パーツ内側側面(影内側の部分) パーツ内側側面の上と左の部分
scrollbar-shadow-color gray パーツ内側側面(影内側の部分) パーツ内側側面の下と右の部分
scrollbar-3dlight-color red パーツ外側側面(影外側の部分) パーツ外側側面の上と左の部分
scrollbar-darkshadow-color maroon パーツ外側側面(影外側の部分) パーツ外側側面の下と右の部分

※スクロール・アローとスクロール・ノブ(スクロール・ボックスともいう)を合わせて単にパーツとした。また、パーツはスクロール・パーツの略。

■参考


Key words:スクロールバー 色

XHTML/CSS・目次 | そのほかのプロパティ・目次

Copyright (C) 2009 http://www.xml.vc/