　今日のお勉強・スクロールバーの色を変える方法　

管理人が特に覚えたくて勉強したタグです　よかったら参考にしてね♪　 ★ ホームページを作ってみよう Ⅲ ★

お知らせ ・・・ 10/20　スクロールバーをもっと細かいスタイルを設定して、各部分の色を変える方法を追加しました♪

ページの一番下に、設定の違いがわかりやすい？サンプル画像作って表示してるので、見てね (*^▽^*)

スクロールバーの色を変える方法

　◆　色を変える方法

　　とても簡単で、スクロールバーの土台となる色を、任意の色に指定するだけなんです

　　スクロールバーの色を変えたいHTMLファイルのヘッダーに、スタイルシート（ＣＳＳ）タグを記述して

　　適用させます

<head>　この間に記述　</head>

※ スクロールバーの色を変える方法は、Internet Explorer 5.5 以降のブラウザで有効だそうです

でも、未対応のブラウザに対して害になるような影響を及ぼすわけではないので、大丈夫との事です♪

　◆　記述するタグ

　<head>　

　　<style type="text/css">

　　　<! - -

　　　　html ，body { scrollbar-base-color ：カラーネーム または ＃カラー数値 }

　　　- ->

　　</style>

　</head>

　※ ＣＳＳの定義の基本

要素タグ｛ｐｒｏｐｅｒｔｙ：ｖａｌｕｅ｝

　上記のタグについて説明します

　　　　◎　html （要素タグ）と body （要素タグ）に対して、スタイルを指定

　　　　　　　　　※ ｈｔｍｌとｂｏｄｙの間に「，（カンマ）」を入れて区切って記述します

　　　　◎　ｐｒｏｐｅｒｔｙ・・・ scrollbar-base-color （スクロールバーの土台となる色を指定するためのプロパティ）

　　　　◎　ｖａｌｕｅ・・・ カラーネーム または ＃カラー数値 （任意の色：好きな色やレイアウトに合った色など）

※ 指定した色がバーの表面の色になって、その他の部分の色は自動的に決められるそうです

　　　　◎　<！ - -　- - > ・・・コメントタグ 　

　　　　　　　　　スタイルシート未対応ブラウザで、ソースが画面にそのまま表示されるのを防ぐタグです

　　　　　　　　　<！ - - スタイルを定義 - - >というふうに、コメントタグではさんで記述します

画面のスクロールバーの色を変更

実際に試してみました

　このページのヘッダーに、上記の方法でスクロールバーの色を変えるタグを記述してみました

　スクロールバーの色をオレンジ系（＃ｆｆｃｃ66）に指定したので

　右端や下（表示される画面がこのページ幅より小さい場合）のスクロールバーを見てみてください♪

　　※　以下が、このページのヘッダーの主なソースです

　<head>

　　<title>今日のお勉強・ＣＳＳ編（スクロールバーの色を変える方法）</title>

<!--

　　　html,body{scrollbar-base-color: #ffcc66}

　　　-->

　　</style>

　</head>

　Ｎｅｗ！　

　★　インラインフレームの

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

　　★　インラインフレームのスクロールバーの色を変える方法

　　　インラインフレームのスクロールバーの色を変える方法は

　　　画面のスクロールバーの色を変える方法と同じです

　　　インラインフレームの中に表示するページのヘッダーに、上記に記載している

　　　　スタイルシート（ＣＳＳ）のタグを記述して適用させます

　　◎　サンプル

　　　　　下のインラインフレームに、このサイトのお勉強ページ （スクロールバーの色を変えてます）を表示してます

　Ｎｅｗ！　

　◆　平らなスクロールバーなど

細かいスタイルを設定

　上記のタグの記述でスクロールバーの色を変えた場合、単色で立体的になりますが

　もっと細かいスタイルを設定して、平らでスクロールバーの周りに枠をつけたいと思います♪

　ヘッダーに記述するのは、上記と同じです

　　★　記　述　タ　グ

　<head>　

　　<style type="text/css">

　　　<! - -

　　　　html ，body

　　　 {

　　　scrollbar - 3dlight - color ：カラーネーム または ＃カラー数値

　　　scrollbar - arrow - color ：カラーネーム または ＃カラー数値

　　　scrollbar - darkshadow - color ：カラーネーム または ＃カラー数値

　　　scrollbar - 3dlight - color ：カラーネーム または ＃カラー数値

　　　scrollbar - f ace - color ：カラーネーム または ＃カラー数値

　　　scrollbar - highlight - color ：カラーネーム または ＃カラー数値

　　　scrollbar - shadow -color ：カラーネーム または ＃カラー数値

　　　　}

　　　- ->

　　</style>

　</head>

　★　スタイルシートタグの意味

　　◎　scrollbar-face-color:　・・・　上下・左右の三角印のある四角い部分とバーの表面の色

　　◎　scrollbar-arrow-color:　・・・　上下・左右の三角印の色

　　◎　scrollbar-3dlight-color:　・・・　上下・左右の三角印のある四角い部分とバーの左枠の外側の色

　　◎　scrollbar-highlight-color:　・・・　上下・左右の三角印のある四角い部分とバーの左枠の内側の色

　　◎　scrollbar-darkshadow-color:　・・・　上下・左右の三角印のある四角い部分とバーの右枠の外側の色

　　◎　scrollbar-shadow-color:　・・・　上下・左右の三角印のある四角い部分とバーの右枠の内側の色

※　スクロールバーの、バーがない部分の色 （バーが移動する下？底？のレールみたいな部分）

scrollbar-face-color と scrollbar-highlight-color が交互に並べられているそうです

　　★　サンプル

　　　管理人が作ったサンプルページのスクロールバーのスタイルを変えてみました♪

　　　　見やすいように、インラインフレームの中に表示してます

　　以下が、表示しているページのヘッダー部分に記述したタグです

<style type="text/css"><!--

　html, body {

　scrollbar-3dlight-color:blue;

　scrollbar-arrow-color:red;

　scrollbar-darkshadow-color:black;

　scrollbar-face-color:white;

　scrollbar-highlight-color:skyblue;

　scrollbar-shadow-color:black;

　}

　--></style>

上の説明でサンプルとしてインラインフレームに表示しましたが、ご覧の方それぞれスクロールバーの幅の設定が違うと思うし、幅を細くしてる場合はあまり違いがわからないと思ったので、管理人のＰＣのスクロールバーの幅をイキナリ！４倍太く設定して≪画像≫にしてみました♪

　この画像と記述したタグの内容を見比べてみてくださいね♪　ちょっとは違いがわかりやすいかなぁと思うんだけど。。。

　★　単色で立体的なスクロールバー

　　　色を変えたスクロールバーを目にするのは、このタイプが多いですよね

<style type="text/css">



</style>

<style type="text/css">



</style>

<style type="text/css">



</style>

☆　このページで使用している画像は、フリー素材と管理人が作成したものです♪