ホームページ作成

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

ボックスや枠線の表示・装飾 (HTML,CSS)

更新日：2002年11月11日

スクロールバーに色を付ける方法

西村文宏

せっかくページ全体をデザインしたのに、スクロールバーの色でデザインが台無し…なんてことはありませんか？スクロールバーに好きな色を指定してみましょう。方法はとっても簡単です。

細かく指定する

スクロールバーの各部分ごとに、細かく色を指定することもできます。

スクロールバーの例
▲立体でないスクロールバーや浅いスクロールバー

上図のように色を細かく指定することによって、「立体でないスクロールバー」や、「立体の浅いスクロールバー」などを作ることも可能です。

スタイルシートの記述は、下記の通りです。スクロールバーを構成する部分6つに対して、6つのプロパティを使ってそれぞれ色を指定できるようになっています。

<style type="text/css"><!--
html, body {
   scrollbar-3dlight-color:    #ffcccc;
   scrollbar-arrow-color:      black;
   scrollbar-darkshadow-color: black;
   scrollbar-face-color:       #ffcccc;
   scrollbar-highlight-color:  #997a7a;
   scrollbar-shadow-color:     white;
}
--></style>

どのプロパティが、どの部分を示しているかは、次の通りです。

	scrollbar-3dlight-color	scrollbar-highlight-color
	scrollbar-darkshadow-color	scrollbar-shadow-color
	scrollbar-face-color （表面）	scrollbar-arrow-color （矢印）

スクロールバーのうち、バーが存在しない部分の背景色（縞模様部分）には、scrollbar-face-color と scrollbar-highlight-color で指定した色が交互に並べられます。

おわりに

今回は、スクロールバーの色を指定する方法をご紹介致しました。
Internet Explorer 5.5 以降でしか有効ではありませんが、他のブラウザに対して特に害になるわけではありませんので、気軽に使えます。
ぜひ、活用してみて下さい。

なお、細かく指定すれば、立体的でなくしたり、逆に凹んでいるように見せたりもできますが、あまりにもスクロールバーらしくないデザインにしてしまうと、使いにくくなってしまう可能性がありますので、気を付けて下さい。

【関連記事】

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！