|
{scrollbar-xxx-color:色;}でページのスクロールバーの色を指定する事ができます。
下の表のブラウザ表示のボタンを押してこのページの画面のスクロールバーの
色を確認して下さい。
■ スクロールバーの部位
スクロールバーの色を指定したい部分の種類は以下の通りです。
| 色を指定したい部分 |
説明 |
ブラウザ表示 |
解除 |
|
face
|
スクロールバーと矢印部分の表面の色を指定します。 |
|
|
|
track
|
スクロールバーの背面（レール）の色を指定します。 |
|
|
|
arrow
|
スクロールバーの上下の矢印の色を指定します。 |
|
|
|
highlight
|
スクロールバーと矢印部分の上辺と左辺の内側の色を指定します。 |
|
|
|
shadow
|
スクロールバーと矢印部分の右辺と底辺の内側の色を指定します。 |
|
|
|
3dlight
|
スクロールバーと矢印部分の上辺と左辺の外側の色を指定します。 |
|
|
|
darkshadow
|
スクロールバーと矢印部分の右辺と底辺の外側の色を指定します。 |
|
|
|
base
|
スクロールバーの全体の色を指定します。 |
外部ファイル
body{
scrollbar-face-color:black;
scrollbar-track-color:white;
scrollbar-arrow-color:white;
scrollbar-highlight-color:black;
scrollbar-shadow-color:black;
scrollbar-3dlight-color:black;
scrollbar-darkshadow-color:black;
}
テキストエリアやボックスなどのスクロールバーの色も
上記と同様の指定で指定することが出来ます。
【ブラウザ表示】
ボックスの
スクロールバー
の色が
変わって
いま
す。
ボックスの横方向のスクロールバーの色が変わっています。
ソース
<form>
<textarea name="area" rows="4" cols="30" class="scroll">
テキストエリアの
スクロールバーの色が
変わっています。
</textarea>
</form>
<p class="scroll">
ボックスの<br>スクロールバー<br>の色が<br>変わって<br>いま<br>す。
<nobr>ボックスの横方向のスクロールバーの色が変わっています。</nobr>
</p>
外部ファイル
.scroll{
scrollbar-face-color:skyblue;
scrollbar-track-color:khaki;
scrollbar-arrow-color:yellow;
scrollbar-highlight-color:orange;
scrollbar-shadow-color:black;
scrollbar-3dlight-color:green;
scrollbar-darkshadow-color:pink;
}
■ 一部のスクロールバーの色を無効にする
外部ファイルまたは、テキストエリアやボックスが複数あるページでbody要素にスクロールバーの色を指定すると
ページ（画面）の右側のスクロールバーの色だけではなくテキストエリアやボックスのスクロールバーの色まで全て
変わってしまいます。
そこでテキストエリアやボックスのスクロールバーの色だけ反映させないようにする
ために{scrollbar-xxx-color:transparent;}
を指定します。
外部ファイル
body{
scrollbar-face-color:skyblue;
scrollbar-track-color:khaki;
scrollbar-arrow-color:yellow;
scrollbar-highlight-color:orange;
scrollbar-shadow-color:black;
scrollbar-3dlight-color:green;
scrollbar-darkshadow-color:pink;
}
textarea,p,div{
scrollbar-face-color:transparent;
scrollbar-track-color:transparent;
scrollbar-arrow-color:transparent;
scrollbar-highlight-color:transparent;
scrollbar-shadow-color:transparent;
scrollbar-3dlight-color:transparent;
scrollbar-darkshadow-color:transparent;
}
■ その他の項目
・
ページに背景色や壁紙を指定する
・
背景画像を固定する
・
背景画像の表示方法を指定する
・
背景画像の表示位置を指定する
・
マウスカーソルの形を変える
・
ページ内の余白を指定する
スタイルシート一覧のページに戻る
|
