スクロールバーの色を指定する-CSS講座-

スクロールバーの色に関する指定は、<body>タグに記述することによりその効果が適用されます。

まず、スクロールバーの色を指定できる場所は何箇所かあります。下の画像を見て下さい。

これらの、紫色の箇所（PCによっては青色になっているかもしれません）、グレーの箇所、黄色の箇所などの色を指定することができます。

本当は他の場所も指定することができるのですが、細かくなってしまうので省きます。

以下のように記述することにより、その記述されたページのスクロールバーの色を指定することができます。

紫の箇所の場合

上の赤文字の部分の【scrolllbar-face-color】が紫色の箇所の色を指定する記述になります。

グレーの箇所の場合

上の赤文字の部分の【scrolllbar-track-color】が紫色の箇所の色を指定する記述になります。

黄色の箇所の場合

上の赤文字の部分の【scrolllbar-arrow-color】が紫色の箇所の色を指定する記述になります。

指定された箇所以外の場合

上の赤文字の部分の【scrolllbar-base-color】が指定された箇所以外（どこも指定してしていなければ全部）の色を指定する記述になります。

<head>内に記述する場合、外部のCSSファイルに記述する場合もこの赤文字の部分は同じになります。

以下のように<head>内に記述することにより、その記述されたページのスクロールバーの色を指定することができます。
上では4種類紹介しましたが、少し記述する文字が違うだけのため、ここでは紫色の箇所を指定する場合のみ紹介します。
解りやすいよう、<head>から記述します。

以下のように外部CSSファイルに記述することにより、そのファイルの読み込まれたページのスクロールバーの色を指定することができます。
ここでも紫色の箇所を指定する場合のみ紹介します。

スクロールバーの記述

CSS-スタイルシート-でのスクロールバーの色の指定方法を紹介しています。