ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

Freepage List

レストアの仕方

< 新しい記事

新着記事一覧(全446件)

過去の記事 >

2003/11/01

【スクロールバーの色を変える】

(9)

カテゴリ：【プチ講座】

　　　　またまた今回も「質問掲示板」に書き込みがありました
ご質問について書いてみますね。

　　　　みなさん、スクロールバー付の「ボックス」とか、「テーブル」を見かけると思います。
　　　　中にはスクロールバーに色を付けているのを見かけますね。
　　　　今日はあれをやってみましょう。

　　　　まずは、ごく一般的なスクロールボックスのタグを書いてみます。

<div style="cursor:help;width:70%;height:100px; overflow-y:scroll;overflow-x:auto; border-style:inset;background-color:tan;">
ここに文字を書きます。
テキストだけの時、最後をくくるタグはとしてください。
このタグがこのボックスを表示しているタグです。
</div>

　　　　ボックスの幅、高さ、を指定したりする属性のタグの説明は
　　　　省かさせていただきます。
　　　　詳しくは【プチ講座】の「ボックスの属性と雛形」にいってみてください。

overflow-y:scroll;overflow-x:auto;
　　　　↑この部分がスクロールバーを表示するためのタグです。
overflow-y:scroll; 　が縦方向にスクロールしなさいと命令しております。
overflow-x:auto; 　が横方向に必要があればスクロールしなさいと命令します。

　　　　では、スクロールバーに色をつけてみましょう。

<div style="cursor:help;border-style:inset;border-width:;border-color:;background-color:khaki;width:70%;height:100px;overflow-y:scroll;overflow-x:auto; scrollbar-base-color:khaki;scrollbar-arrow-color:khaki;scrollbar-face-color:khaki;scrollbar-track-color:khaki;scrollbar-highlight-color:khaki;scrollbar-3dlight-color:khaki;scrollbar-shadow-color:khaki;scrollbar-darkshadow-color:khaki; ">

ここに文字を書きます。
</div>

赤色のタグの部分が、スクロールバーの色を指定しています。

え？スクロールバーがないって・・・？(￣m￣*)V
　　　　ごめんごめん！―(￣∇￣;)→グサ!!!　背景色とすべて同じにしてみました。
background-color:khaki; 　のところが背景色です。
　　　　スクロールバーの色を指定するところをすべて背景色と同じ　 khaki にしますとこうなります。

　　　　では！判りやすいようにもう一色入れて見ましょう。 white(白) を入れてみます。

<div style="cursor:help;border-style:inset;border-width:;border-color:;background-color:khaki;width:70%;height:100px;overflow-y:scroll;overflow-x:auto; scrollbar-base-color:khaki;scrollbar-arrow-color:white;scrollbar-face-color:khaki;scrollbar-track-color:white;scrollbar-highlight-color:white;scrollbar-3dlight-color:white;scrollbar-shadow-color:white;scrollbar-darkshadow-color:white; ">

ここに文字を書きます。
スクロールバーの色は背景色と同じ
khaki　と　white　の二色を使っています。

</div>

　　　　お分かりでしょうか？スクロールバーは全部で８箇所色を指定することが出来ます。

scrollbar-base-color:khaki; 　　全体の色
scrollbar-arrow-color:white; 　　　矢印の色
scrollbar-face-color:khaki; 　　　　バーの表面の色
scrollbar-track-color:white; 　　　バーの動く部分の色
scrollbar-highlight-color:white; 　　バーの明るくなる部分の色　
scrollbar-3dlight-color:white; 　　　三次元的になる部分の色
scrollbar-shadow-color:white; 　　　明るい影の色
scrollbar-darkshadow-color:white; 　　暗い影の色

khaki 　と　 white 　のところをお好きに変えてください。
　　　　いろいろな、スクロールバーが出来ると思います。

　　　　簡単にココに入れてある、属性のタグの説明をしておきます。
cursor:help; 　　カーソルを変えます。カーソルの形状を変えてみるに説明があります。
border-style:inset; 　　枠の種類です。
border-width:; 　　枠の幅を指定します。
border-color:; 　　枠の色を指定します。
background-color:khaki; 　　ボックスの背景色を指定します。

　　　　では！みなさん頑張ってくださいませ。:*.；".*・；・^；・:＼(￣(エ)￣)/:・；^・；・*

　　　　【プチ講座メニュー】はこちらから！

お気に入りの記事を「いいね！」で応援しよう