A.T-MOON

contents

パンくずリスト



    スクロールバーの設定

スタイルシートを使ってページ全体のスクロールバーの設定をします。
<head>〜</head>の間に記述します。

マーク スクロールバーに色をつける body{scrollbar-A-color:B;}

scrollbarのcolor属性を使ってスクロールバーの色を指定します。
Aにはどの部分を指定するのかを記述します。
trackfacehighlight・・・など色々ありますが、下の画像の色とタグを参照して下さい。
Bでそれぞれの色の指定をします。カラーコードまたはカラーネームを記述します。

スクロールバー
<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スクロールバーの指定</title>
  <style type="text/css">
  <!--
   body {
   scrollbar-track-color:black;
       /*トラックの色【黒】*/
   scrollbar-face-color:white;        /*矢印の土台の四角とバーの色【白】*/
   scrollbar-highlight-color:green;     /*内側を囲む左、上の色【緑】*/
   scrollbar-shadow-color:blue;       /*内側を囲む右、下の色【青】*/
   scrollbar-3dlight-color:brown;      /*外側を囲む左、上の色【茶色】*/
   scrollbar-darkshadow-color:deeppink; /*外側を囲む右、下の色【ピンク】*/
   scrollbar-arrow-color:red;        /*矢印の色【赤】*/
    }
  -->
  </style>

 </head>
 <body>
 <p>
  ページ全体に反映されるスクロールバーの色を指定しています
 </p>
 </body>
</html>
↓ピンク部分のタグをコピー↓

このように、スクロールバーのそれぞれの部分に色の指定ができます。
単色で指定する場合はscrollbar-base-color:色;とだけ記述すればOKです。

<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スクロールバーの指定</title>
  <style type="text/css">
  <!--
   body {
   scrollbar-base-color:gray;

    }
  -->
  </style>

 </head>
 <body>
 <p>
  ページ全体に反映されるスクロールバーがグレイに指定されています
 </p>
 </body>
</html>
↓ピンク部分のタグをコピー↓

その他にも例えばこのようなスクロールバーを指定できます。

白ベースに黒


白ベースに赤


黒ベースに白


赤ベースに黒

ページTOP


スタイルシートTOPに戻る スクロールバーの装飾