MB-Support

パソコン初心者のサポートページ

スクロールバー色を変更する

 スタイルシートでブラウザのスクロールバーの色を変更できますが、全てのブラウザが対応しているわけではありません。しかし、現在は IE エンジンに切り換えられるものが多いので、試してみても良いでしょう。


標準のスクロールバー

右の灰色のスクロールバーは何も指定がない状態です。 この部分に色をつけるには以下の文を <head> 〜 </head> の間に付け足します。 下の書き方は、今後、複数のスタイルを指定するのに分かりやすい配置になっています。


<style type="text/css">
<!--
body	{
scrollbar-base-color:色指定1;
scrollbar-arrow-color:色指定2;
}
-->
</style>

色指定にはカラーコードかカラーネームを指定します。 ( 例 カラーコード="#000000" カラーネーム="black" ) 色指定 1 にはスクロールバーのベースになる色を指定します。 色指定2には上下、左右の三角形の色を指定します。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
<style type="text/css">
<!--
body {
scrollbar-base-color:#000000;
scrollbar-arrow-color:#ff0000;
}
-->>
</style>
</head>
<body>
 
</body>
</html>

ブラウザ


ただし、これは Internet Explorer (インターネット エクスプローラ)の機能で、 Netscape Browser(ネットスケープ ブラウザ) 、 Mozilla Firefox(モジラ ファイヤーフォックス)などでは表示されません ( このスタイルを適用しても、内部的にエラーが記録されますが、外見には問題がありません ) 。 しかし、IE 以外でも、 Opera(オペラ)ブラウザでは、スクロールバーのスタイルを手動で設定できますし、Mozilla Foundation の Gecko エンジンと Internet Explorer エンジンをユーザーが切り替えられる特異なブラウザ では有効です。



外部スタイルシートで一括指定

この設定は、 ページの背景色を変更する で説明した様に、外部スタイルシートを利用した方が便利です。 右は、ページの背景色を黒 ( #000000 ) に設定する内容ですが、スクロールバーのスタイルも Body に指定するので、以下の様に記入します。

body {
 background-color:#000000;
 scrollbar-base-color:#000000;
 scrollbar-arrow-color:#ff0000;
}

これで、このスタイルシートを読み込んだ全てのページで、スクロールバーの色を統一できます。 単独ページでスクロールバーの色を変更するには、先に説明したヘッダーの間にスタイルを記入する方が良いでしょう。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項