このTipsではパターンが3つ。
「HEAD内にタグを定義」する方法と、
「BODY内にタグを定義する方法」、
「テキストのフォームに適用する方法」
のどれか。 |
|
+
|
|
スクロールバーの色を変えるタグ
scrollbar-base-color
scrollbar-fase-color
scrollbar-arrow-color
scrollbar-track-color
scrollbar-3dlight-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-darkshadow-color
|
|
|
HEAD内でスクロールバーのカラーの変更を定義する場合
|
|
ここでスクロールバーの変更のタグを入力したら、BODY内に同じタグは書き込まないでください!
<head>
<style type=text/css>
body {
scrollbar-arrow-color:色の名前か16進コード;
scrollbar-base-color:色の名前か16進コード;
scrollbar-face-color:色の名前か16進コード;
scrollbar-track-color:色の名前か16進コード;
scrollbar-3dlight-color:色の名前か16進コード;
scrollbar-highlight-color:色の名前か16進コード;
scrollbar-shadow-color:色の名前か16進コード;
scrollbar-darkshadow-color:色の名前か16進コード;
}
</style>
</head>
STYLEの属性を使い、スクロールバーに与えられた8つの属性の色を変更すると、ブラウザーのバーも思いのままに変えられるテクニック。
カラーコードとスクロールバーの属性を下の補足を読んで自分の好きなようにカスタマイズしてみましょう。
|
カラーコード
カラーコードは「#○○○○○○」のように、16進法で入力するか、「white」や「blue」のように、アルファベットで入力します。
 カラーコードの参考
|
スクロールバーの属性
スクロールバーの各属性は全部で8つあります。
こちらを参考に。
スクロールバーの属性
|
|
|
|
|
ここでスクロールバーの変更のタグを入力したら、HEAD内に同じタグは書き込まないでください!
<body style="
scrollbar-arrow-color:色の名前か16進コード;
scrollbar-base-color:色の名前か16進コード;
scrollbar-face-color:色の名前か16進コード;
scrollbar-track-color:色の名前か16進コード;
scrollbar-3dlight-color:色の名前か16進コード;
scrollbar-highlight-color:色の名前か16進コード;
scrollbar-shadow-color:色の名前か16進コード;
scrollbar-darkshadow-color:色の名前か16進コード;">
(あなたのページの中身)
</body>
ホームページに実際に写し出される、「body」のタグの直後に、このように定義することで、バーを変える事が出来ます。スクロールバーの変更にはSTYLEの属性を使い、スクロールバーに与えられた8つの属性の色を変更することが必要です。
カラーコードとスクロールバーの属性を下の補足を読んで自分の好きなようにカスタマイズしてみましょう。
|
カラーコード
カラーコードは「#○○○○○○」のように、16進法で入力するか、「white」や「blue」のように、アルファベットで入力します。
カラーコードの参考
|
スクロールバーの属性
スクロールバーの各属性は全部で8つあります。
こちらを参考に。
スクロールバーの属性
|
|
|
|
|
<head>
<style type=text/css>
.textform {
scrollbar-arrow-color:色の名前か16進コード;
scrollbar-base-color:色の名前か16進コード;
scrollbar-face-color:色の名前か16進コード;
scrollbar-track-color:色の名前か16進コード;
scrollbar-3dlight-color:色の名前か16進コード;
scrollbar-highlight-color:色の名前か16進コード;
scrollbar-shadow-color:色の名前か16進コード;
scrollbar-darkshadow-color:色の名前か16進コード;
}
</style>
</head>
<textarea rows="2" name="a1" cols="20" class="textform">
</textarea>
色指定したいテキストフォームの属性を付加し、バーのカラーの定義を事前に行っておき(head内)、body内で適用したいテキストフォームにその属性をつければ出来ます。この例だと「textform」に当たります。
| rows |
ボックスの高さ（数が大きければその分､高さも増える） |
| name |
このボックスの名前(色指定するスタイルの属性とは違います!) |
| cols |
ボックスの幅（数が大きければその分､幅も増える） |
| class |
スタイルの属性 これとhead内の文字を同じにする |
|
カラーコードとスクロールバーの属性を下の補足を読んで自分の好きなようにカスタマイズしてみましょう。
|
間違えやすいポイント
<body>タグでカラーの定義で、テキストフォームに名前を入力するところで必ず先頭に「.(ピリオド)」をつけます。
これがないだけで、効果が出ません。
|
カラーコード
カラーコードは「#○○○○○○」のように、16進法で入力するか、「white」や「blue」のように、アルファベットで入力します。
カラーコードの参考
|
スクロールバーの属性
スクロールバーの各属性は全部で8つあります。
こちらを参考に。
スクロールバーの属性
|
|
|
