HOME >> スタイルシート > スクロールバーの色を指定する

　スクロールバーの色を指定する

■	scrollbar-base-color	scrollbar-face-color
	scrollbar-arrow-color scrollbar-3dlight-color scrollbar-shadow-color	scrollbar-track-color scrollbar-highlight-color scrollbar-darkshadow-color

指定できる値

RGB値で指定

#RRGGBBやRGB(n%、n%,n%)など

カラー名

redやblueなど

システムカラーで指定

スクロールバーの色はIEでは灰色ですが、scrollbar-base-colorプロパティなどを使えばスクロールバーの色を変えることが出来ます。このプロパティをBODYに指定した場合、ページ全体のスクロールバーの色が指定された色になります。フォームのテキストエリアがある場合は、このスクロールバーも一緒に指定された色になります。もし、テキストエリアのスクロールバーはBODYの指定とは違うものにしたい場合、テキストエリアにscrollbar-base-colorプロパティなどで指定すれば、そのテキストエリアのみスクロールバーの色を変えることが出来ます。

スクロールバーの色を指定するプロパティはscrollbar-base-colorプロパティの他に７つあります。大まかに色を変えるにはscrollbar-base-colorプロパティだけでいいですが、矢印や影の色も指定したいですよね。この下にその他のプロパティと、赤色を指定した場合の表示例がありますので、これを見て参考にして下さいね。

このプロパティはNetscapeには対応していないので、Netscapeで見た場合はスクロールバーの色は元のままです。

サンプル
プロパティ前後のscrollbarとcolorは省略して記入しています。　faceの場合は、scrollbar-face-colorです。
base	face	arrow	track	3dlight	highlight	shadow	darkshadow

サンプル - Microsoft Internet Explorer

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE>
<!--
BODY  {
  scrollbar-face-color:       #ffc97c; 
  scrollbar-highlight-color:  #ff963c;
  scrollbar-shadow-color:     #ff963c;
  scrollbar-darkshadow-color: #ffc97c;
  scrollbar-arrow-color:      #ff963c;
  scrollbar-base-color:       #fea970;
  scrollbar-3dlight-color:    #ffc97c;
  scrollbar-track-color:      #ffddaa;}
-->
</STYLE>
</HEAD>
<BODY>
<FORM>
<TEXTAREA rows="10" cols="20">
ページとテキストエリアのスクロールバーに
色がつきました
(これ以降の文字は省略）
<TEXTAREA>
</FORM>
</BODY>
</HTML>

HOME >>スタイルシート

...