スクロールバーの色を変えよう スクロールバーをサイト色に合わせて自由にカスタマイズできるぞ。 ページのバーだけではなく、テキストボックスなども変えられるから、色々ためしてみよう。 月額125円からのレンタルサーバ

設定無し スクロールバーに注目。 色付きの部分が、適用される場所だ。 これらの組合わせで綺麗に仕上げよう。

矢印の色 .scrollbar-arrow-color{ scrollbar-arrow-color:#FF9900; scrollbar-3dlight-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-darkshadow-color: #ffffff; } 面の色 .scrollbar-face-color{ scrollbar-arrow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-face-color:#FF9900; scrollbar-darkshadow-color: #ffffff; }

立体頂点の明るい色 .scrollbar-highlight-color{ scrollbar-arrow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-highlight-color:#FF9900; scrollbar-shadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-darkshadow-color: #ffffff; } 立体頂点の暗い色 .scrollbar-shadow-color{ scrollbar-arrow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#FF9900; scrollbar-face-color:#ffffff; scrollbar-darkshadow-color: #ffffff; }

立体底の明るい色 .scrollbar-3dlight-color{ scrollbar-arrow-color:#ffffff; scrollbar-3dlight-color:#FF9900; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-darkshadow-color: #ffffff; } 立体底の暗い色 .scrollbar-darkshadow-color{ scrollbar-arrow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-darkshadow-color: #FF9900; }

これらの組合わせで、こんなスクロールバーを作れる。

scrollbar-arrow-color:#FF9900; scrollbar-3dlight-color:#FF9900; scrollbar-highlight-color:#FFFFCC; scrollbar-shadow-color:#FF9900; scrollbar-face-color:#FFFFCC; scrollbar-darkshadow-color: #FFFFCC;