Homepage Zero ガイド
logo

ゼロから始めよう！わかりやすい！ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホーム＞HTMLリファレンス（アルファベット検索）＞scrollbar-base-colorプロパティ

CSSプロパティ辞典
タグ一覧（ABC順） 目的別タグ一覧 スタイルシート一覧（ABC順） 目的別スタイルシート一覧

スクロールバーの色を個別に指定する

どのプロパティがスクロールバーのどの部分の色に対応しているかを確認しましょう

使用プロパティ

CSSプロパティ

① scrollbar-highlight-color: 値;
② scrollbar-3dlight-color: 値;
③ scrollbar-darkshadow-color: 値;
④ scrollbar-shadow-color: 値;
⑤ scrollbar-arrow-color: 値;
⑥ scrollbar-face-color: 値;
⑦ scrollbar-track-color: 値;

対象となる
要素

スクロールバーが表示される要素

継承

する

値

色名やカラーコード（16進数）など
対応ブラウザ IE6 Win

解説

スクロールバーの色を個別に指定する場合には、スクロールバーが表示される要素に以下のプロパティ指定し、その値に色を指定しましょう。

① scrollbar-highlight-color プロパティ
…バーのハイライト部分の色を指定する。

② scrollbar-3dlight-color プロパティ
…バーの左側と上側のハイライト部分の色を指定する。

③ scrollbar-darkshadow-color プロパティ
…バーの下側と右側の影の部分の色を指定する。

④ scrollbar-shadow-color プロパティ
…バーの影の部分の色を指定する。

⑤ scrollbar-arrow-color プロパティ
…バーの矢印の色を指定する。

⑥ scrollbar-face-color プロパティ
…バーの表面の色を指定する。

⑦ scrollbar-track-color プロパティ
…バーのレールの色を指定する。

ページ全体のスクロールバーの色を指定するには、html 要素とbody 要素に指定しましょう。

※スクロールバー関連のプロパティは、 Internet Explorer 独自のプロパティとなっていますので、使用の際は注意しましょう。

スクロールバー全体の基本色（ベースの色）を指定したい場合は「scrollbar-base-color プロパティ」を参照してください。

使用例

記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>

<!--スタイルシート-->
<style type="text/css">

html,body {
scrollbar-base-color: orenge;
scrollbar-arrow-color: red;
scrollbar-track-color: silver;
}

</style>
</head>

<!--ページの本文-->
<body>

<p>スクロールバーのベースの色の他に、部分的な箇所の色を個別に指定します。<br>
スクロールバー関連のプロパティは、 Internet Explorer 独自のプロパティとなっていますので、使用の際は注意しましょう。</p>

</body>
</html>
↓
[ブラウザでの表示例]
HOME PAGE ZERO ガイド

スクロールバーのベースの色の他に、部分的な箇所の色を個別に指定します。
スクロールバー関連のプロパティは、 Internet Explorer 独自のプロパティとなっていますので、使用の際は注意しましょう。

関連情報ページ

△ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>
logo
ゼロから始めよう！わかりやすい！ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|
copyright (C) TOMIY All Right Reserved
inserted by FC2 system