【スクロールバー】スクロールバーを好きな色に変えてみよう!
PC元気COM

スクロールバーを好きな色に変えてみよう!

Base Color だけ設定する

1.簡単に解説
2.Base Color だけ設定する
3.スクロールバーサンプル配布・・・黒・白・灰色系1
4スクロールバーサンプル配布・・・黒・白・灰色系2

スクロールバーの色変更は、難しいって思ってませんか?
サンプルファイルを使えば、カンタンに色変更ができます。

難易度 ★★

<style type="text/css"><!--
html, body{scrollbar-base-color:#0066CC;
}--></style>

変更箇所は、#0066CCだけ!!

簡単に解説

意味が分からなくても上記の3行だけで、スクロールバーの色を指定できてしまいます。
ポイントは、
scrollbar-base-color : スクロールバーのベースカラーを指定するためのプロパティです。
そして、
#0066CC : 色の指定です。実際にあなたが変更するのは、この部分だけです。
ここに、好きな色を入れて試してみて下さい。
この色がスクロールバーの表面の色になり、その他の部分の色は何もしなくても、自動的に決まってしまうのです。

Base Color だけ設定する・・・一番簡単な方法です。

急いでいる時は、基本色だけを決めてもデフォルトのグレーよりはずっといいですね。


左のタグはフレーム内のテキストをコピーすればそのまま使えます。#9B9B9B(うすねずいろ)。

テキストボックスなどのスクロールバーの色だけを変えたい

もし、テキストボックスなどのスクロールバーの色だけを変えたいのであれば、次のように記述します。

<style type="text/css"><!--
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(ちゃねず)