スクロールバーを好きな色に変えてみよう!
Base Color だけ設定する
スクロールバーの色変更は、難しいって思ってませんか？
サンプルファイルを使えば、カンタンに色変更ができます。
難易度 ★★
<style type="text/css"><!--
html, body{scrollbar-base-color:#0066CC;
}--></style>
変更箇所は、#0066CCだけ！！
html, body{scrollbar-base-color:#0066CC;
}--></style>
変更箇所は、#0066CCだけ！！
簡単に解説
意味が分からなくても上記の３行だけで、スクロールバーの色を指定できてしまいます。
ポイントは、
scrollbar-base-color ： スクロールバーのベースカラーを指定するためのプロパティです。
そして、
#0066CC ： 色の指定です。実際にあなたが変更するのは、この部分だけです。
ここに、好きな色を入れて試してみて下さい。
この色がスクロールバーの表面の色になり、その他の部分の色は何もしなくても、自動的に決まってしまうのです。
Base Color だけ設定する・・・一番簡単な方法です。
急いでいる時は、基本色だけを決めてもデフォルトのグレーよりはずっといいですね。
左のタグはフレーム内のテキストをコピーすればそのまま使えます。#9B9B9B（うすねずいろ）。
テキストボックスなどのスクロールバーの色だけを変えたい
もし、テキストボックスなどのスクロールバーの色だけを変えたいのであれば、次のように記述します。
<style type="text/css"><!--
textarea { scrollbar-base-color: #ffcccc; }
--></style>
textarea { scrollbar-base-color: #ffcccc; }
--></style>
スクロールバーサンプル配布・・・黒・白・灰色系1
フレーム内をコピーして、HTMLファイルの中にある
<head>〜</head> タグで囲まれた内側に貼り付けます。
#56638F（あいねずみ）；#DDDED3（アイボリー）；#727B69（あおにび）
4.#9F945F（うつぶしいろ）；5.#262626（くろ）；6.#4C4C4C（くろつるばみ）
7.#533563（こいねず）；#B29D9D（さくらねず）；#4B5A66（さびねず）
10.#28222A（しこくしょく）；#191919（しっこく）；#A5A5A5（シルバーグレー）
13.#FAFAFA（しろ）；#BCBDC2（スカイグレー）；#79677E（スチールグレー）
16#CACCB2（すないろ）；17#333333（すみいろ）；18#55545D（スレートグレイ）
19#DDDED3（ぞうげいろ）；20#514454（チャコールグレー）；21#A39B8E（ちゃねず）
PCを10倍使いこなす無料のメールマガジンにぜひ登録を
|
いらっしゃい
本日のお客様
昨日のお客様
