スタイルシートの技
指定した部分の上にマウスが乗った時のカーソルを変更したい （Internet Explorer 4.0~）
スクロールバーを持てるオブジェクトに指定する事で、その色を変更できたりします。 非常に細かいですので、色が変わっている部分はオレンジ色で示す事にしました。 また、スクロールバーの色設定を認識できるのは今の所ではInternet Explorer 5.5以上のみです。 OperaやFireFoxでは変化がありません。
|
scrollbar-base-color
スクロールバーの基本部分の色を指定します。上下矢印と、スクロール部分の内部の色になります。 |
scrollbar-track-color
スクロールバーのスクロールする領域の背景部分の色を指定します。 |
scrollbar-arrow-color
スクロールバーの上下ボタンの「▲」「▼」の色を指定します。 |
|
scrollbar-3dlight-color
上下ボタンと、スクロール領域の部分の左と上の部分の縁の色を指定する事ができます。 |
scrollbar-highlight-color
「scrollbar-3dlight-color」が縁なのに対して、これはその内部側の縁になります。 |
scrollbar-shadow-color
「scrollbar-highlight-color」の反対部分の右と下の内部側の縁の色になります。 |
|
scrollbar-darkshadow-color
「scrollbar-3dlight-color」の反対部分の右と下の縁の色になります。 |
このように非常にパラメータが多いのでかなり設定が大変です。 フラットなスクロールバーだったらさほど難しくありませんし、クールに魅せる事ができます。 スクロールバーをフラットにするには、2グループに分けて色を変更します。
以下は枠の色になりますので、これらの値を3つとも同じ色に指定してください。
- scrollbar-arrow-color
- scrollbar-3dlight-color
- scrollbar-darkshadow-color
以下は内部の色になります。これも4つとも同じ色にしてください。
- scrollbar-face-color
- scrollbar-track-color
- scrollbar-highlight-color
- scrollbar-shadow-color
それではサンプルスタイルシートを見てみましょう。
body
{
scrollbar-face-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ff0080;
scrollbar-3dlight-color: #ff0080;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #ff0080;
}これを実行すると「Internet Explorer 5.5」以上であれば、下の左図のようなスクロールバーが表示されているはずです。
スクロールバーを適応させたい場所にクラスを適応させる事ができます。 今回はbody要素に適応させていますが、こうすると、一般にブラウザの右端のスクロールバーが適応されます。 他には、「overflow」などではみ出た部分のスクロール部分の色を変更します。 その場合は、別に「.pinkscrollbar」などのクラスを作成してから適応させれば良いでしょう。 この当たりの話はやや高度なので、また後で見直してみてください。