【ホームページ作成】スクロールバーに色を付ける方法

スクロールバーを好きな色で塗る

せっかくページ全体をデザインしたのに、スクロールバーの色でデザインが台無しに見える……ということはありませんか？Internet Explorer 5.5 以降では、スタイルシートを使ってスクロールバーの色を細かく指定することができます。
※スタイルシートによるスクロールバーの色指定は、Internet Explorerの独自拡張機能です。

▲色を変えたスクロールバーの例

その他のブラウザでは何にも変化しないのですが、変化しないだけで特に害はないので、 スクロールバーの色を変えてみたい方は、気軽に試してみましょう。

ベースカラーだけを指定する

最も手軽な方法は、ベースカラーだけを指定する方法で、これはとても簡単です。次のように、たった3行を書くだけです。

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

※「html, body」： ウインドウのスクロールバーに対して色を指定したい場合は、このように html要素と body要素に対してスタイルを指定します。
※「scrollbar-base-color」： スクロールバーのベースカラーを指定するためのプロパティです。
※「#ffcccc」： 色の指定です。好きな色を入れて試してみて下さい。この色がバーの表面の色になり、その他の部分の色は自動的に決められます。

ウインドウそのものではなく、「テキストボックス」のスクロールバーの色だけを変えたいのであれば、次のように記述します。

<style type="text/css"><!--
   textarea { scrollbar-base-color: #ffcccc; }
--></style>

セレクタ（スタイルを適用する要素名）を「textarea」に変えるだけです。
テキストボックスのほか、スクロールバーが存在するすべての要素に対して指定可能です。

このように、「ベースカラー」の1色を指定することで、自動的にスクロールバー全体が立体的に装飾されます。 もっと細部まで自由に色を指定したい場合は、スクロールバーの各部分ごとに色を指定できるプロパティを利用します。

次のページへ続きます →