A.T-MOON

contents

パンくずリスト



    スクロールバーの装飾

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

マーク スクロールバーを非表示にする {overflow:hidden}

overflow属性を使ってスクロールバーを非表示にします。

<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スクロールバーを非表示</title>
  <style type="text/css">
  <!--
   body {
   overflow:hidden

    }
  -->
  </style>

 </head>
 <body>
 <p>
  スクロールバーが表示されません
 </p>
 </body>
</html>
↓ピンク部分のタグをコピー↓

ページTOP


マーク スクロールバーを透過する {filter:chroma(color=A)}

filter属性を使ってスクロールバーを透過します。
color:transparent;
<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スクロールバーを非表示</title>
  <style type="text/css">
  <!--
   body {
   overflow:hidden

    }
  -->
  </style>

 </head>
 <body>
 <p>
  スクロールバーが表示されません
 </p>
 </body>
</html>
↓ピンク部分のタグをコピー↓

マーク 一部のスクロールバーのみ指定の反映を無効にする セレクタ名 {scrollbar-A-color:transparent;}

transparentとは「透明な」という意味で
指定したセレクタの指定部分のスクロールバーの色を透明(反映させない)ようにできます。
又、セレクタ名は,(半角コンマ)で区切っていくつも設定できます。

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

    }
   textarea {
   scrollbar-track-color: transparent;
   scrollbar-face-color: transparent;
   scrollbar-highlight-color: transparent;
   scrollbar-shadow-color: transparent;
   scrollbar-darkshadow-color: transparent;
   scrollbar-3dlight-color: transparent;
   scrollbar-arrow-color: transparent;
   }
  -->
  </style>

 </head>
 <body>
 <p>
  ページ全体に反映されるスクロールバーがグレイに指定されていますが<br>
  テキストエリア内のスクロールバーには反映しません
 </p>
 </body>
</html>
↓ピンク部分のタグをコピー↓

ページTOP


スクロールバーの設定に戻る