 しっかし、これはインターネットエクスプローラー（ＩＥ）しか効果ないが、一応説明しておこうかの。
ＩＥの利用者は多いでのぉ。
一つずつ説明もなんぢゃから、画像を用意したぞい。
まずは、見て下され。
上の画像の各プロパティ（cssに記述するこういったものをそう呼ぶんだそうぢゃ/^^;）は、なにも全部指定しなくてはならんというわけじゃないんぢゃ。
指定したいものだけ指定すればいい。
あとは、そうぢゃな、実際に指定したページを見て、これでいいかどうか決めるだけぢゃ。（ｗ
いつものように CSSの記述方式（笑）どおりにやるんぢゃぞ。
●五味教授式、CSS記述方式の覚え方
「プロパティ」：（は） 「指定内容（この場合色名）」；（です）
※「は」のコロンや 「です」に当たるセミコロンも忘れずに書くんぢゃぞ。 |
では、わしは、全部指定した見本ページを作ってみるぞい。
前のものにスクロールバーの色変更のプロパティを追加して、sytle12.cssで保存するとしようかいのぉ。
ページ全体ぢゃから、最初に持ってくるとしよう。
赤い文字のところぢゃ。
html, body{
scrollbar-3dlight-color: yellow;
scrollbar-hightlight-color: blue;
scrollbar-arrow-color: red;
scrollbar-face-color: white;
scrollbar-shadow-color: gray;
scrollbar-darkshadow-color: black;
scrollbar-track-color: lightblue;
}
body {
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;
}
h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";
}
h2 {
color: green;
font-size: large;
clear: both;
}
h2.s-title {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
}
h2.link {
background-color: orange;
font-size: normal;
clear: both;
}
p {
line-height: 1.5em;
}
img {
float: left;
margin-right: 1em;
margin-bottom: 1em;
}
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: red;
}
a:hover {
color: blue;
background-color: yellow;
text-decoration:UNDERLINE OVERLINE;
}
|
スクロールバーの背景色（scrollbar-track-color）を指定してないときは、バーの表面の色（face-color）とバー内側の光の色、ハイライト色（hightlight）とが組み合わさった色になる。
と言ってもその２つが指定してないときは、デフォルトということになるかのぉ。
どうぢゃ？わしのは、こんな感じになっておる。
色が分かりやすいように、デザインは考えておらんぞ。適当ぢゃ。配色の合ってない点は無視しておいてくだされや。
ということで、色を変えてみたり、ここは指定してもここはやめておこうとか、いろいろテストして様子をみてくだされ。
最後にもう一度言っておくが、ＩＥ以外のブラウザ（ＩＥに準拠したものならいいかも？）以外には反映されないぞい。しかし、やっぱりページと配色がマッチしているのはいいもんぢゃ。他のブラウザも対応してくれると嬉しいのぉ。
おっといかん！簡単に色を変えられる方法もあった！
１つのプロパティでスクロールバーの全ての色を変えることもできるのぢゃ！
| ●scrollbar-base-color: 色名; |
html, body{
scrollbar-base-color: lightgreen;
} |
上の赤い１行のプロパティ指定だけで、バーがこのページのようにlightgreenになっるはずぢゃ。
やってみてくだされ♪
|