スクロールバー(scrollbar)の色の変更の仕方・方法

超初心者でも簡単にできるホームページ作成基礎講座

ホームページの作成に役立つ豆知識

ホームページ作成・HTML基礎講座・スタイルシート(CSS)・javascript・SEO対策



リストマークスクロールバーについて

InternetExplorerのみの対応ですがスクロールバーの色変更が出来ます。
色変更にはいくつか方法がありますが代表的な2つを紹介させて頂きます。
スクロールバーの色指定はコードでもカラーネームでもどちらでも可です。

※インターネットエクスプローラー(IE)のみ対応です。

scrollbar_image.gif
1.スクロールバーの一括指定
サンプルソース
<head></head> 内に以下を記述して下さい。
<!--==ここからソース==-->
<style type=text/css>
<!--
body {
scrollbar-base-color: white;
}
-->
</style>
<!--====ここまで=====-->
2.スクロールバーの詳細指定
サンプルソース
<head></head> 内に以下を記述して下さい。
<!--==ここからソース===========-->
<style type=text/css>
<!--
body {
scrollbar-face-color: #0080c0;
scrollbar-highlight-color: #cccccc;
scrollbar-shadow-color: #cccccc;
scrollbar-3dlight-color: BLACK;
scrollbar-arrow-color: #ffff00;
scrollbar-track-color: #cccccc;
scrollbar-darkshadow-color: #999999;
}
-->
</style>
<!--====ここまで==============-->
詳細指定修正箇所
scrollbar-base-color 全体を一括指定
scrollbar-face-color ボタン・バーの色を指定
scrollbar-highlight-color 内側のハイライトの部分を指定
scrollbar-shadow-color 内側の影を指定
scrollbar-3dlight-color 外側のハイライトを指定
scrollbar-arrow-color 矢印を指定
scrollbar-track-color レール部分を指定
scrollbar-darkshadow-color 外側の影を指定

※現在のこのページが詳細指定のサンプルになっています。
clear.gif

ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora