スポンサー
ウェブデザイン基礎講座
- ウェブデザインの大原則 ( 48 )
- ウェブユーザビリティ ( 6 )
- カラーセオリー ( 6 )
フォトショップ講座
- フォトショップの基本 ( 230 )
- エフェクト ( 169 )
- テキスト ( 81 )
- テクスチャ&パターン ( 60 )
- ウェブレイアウト ( 38 )
- ドロー ( 73 )
- カラーマネージメント ( 29 )
- 画像加工&合成&修正 ( 127 )
HTML&CSS講座
- HTML&CSS ( 41 )
グラフィック講座
- AdobeIllustrator ( 37 )
- Fireworks ( 1 )
Flash講座
- Flash ( 31 )
3D講座
- 3D ( 1 )
ウェブプログラミング講座
サイトメンテナンス講座
- サイトメンテナンス ( 39 )
サイト紹介
- サイト紹介 ( 8 )
スペシャルリンク
サイト内検索
メールマガジン
デザイナー向けのメルマガ
毎週金曜日に発行しています
毎週金曜日に発行しています
テクニック
Home ＞
HTML&CSS講座
＞ CSSでスクロールバーの色を変更する
CSSでスクロールバーの色を変更する
色の付いたスクロールバーを見たことあるでしょう？そしてそれをどう作るのか疑問に思ったことはありませんか？とても簡単です。コードの記述とその解説を紹介します。
ページのheadセクション(<head>と</head>の間)で作業します。
<style type="text/css">
{
scrollbar-face-color : #C0C0C0 ;
scrollbar-track-color: #C0C0C0 ;
scrollbar-arrow-color: #000000 ;
scrollbar-shadow-color: #000000 ;
scrollbar-highlight-color: #C0C0C0 ;
scrollbar-darkshadow-color: #C0C0C0 ;
}
</style>
face colorとは実際にページで使われるスクロールバーの色です。track colorとはスクロールバーが動くトラックの色になります。Arrow colorとはスクロールバーの上下にある矢印の色です。Shadow colorはスクロールバーの色です。Highlightはスクロールバーをクリックしたときに付く色です。Dark Shadowは上下の矢印の影を指します。
ヘックスカラーコードを好みの色に変えて使ってください。必要ならHex Chartを参考に！
スポンサードリンク
CSSでスクロールバーの色を変更する 
投稿日：2006年11月14日 レベル：初心者 ソフトウェア：
色の付いたスクロールバーを見たことあるでしょう？そしてそれをどう作るのか疑問に思ったことはありませんか？とても簡単です。コードの記述とその解説を紹介します。
- Step1 ： サンプルソース
- Step2 ： スクロールバーの色
- Step3 ： スクロールバーの色の変更
Step1 − サンプルソース
ページのheadセクション(<head>と</head>の間)で作業します。
<style type="text/css">
{
scrollbar-face-color : #C0C0C0 ;
scrollbar-track-color: #C0C0C0 ;
scrollbar-arrow-color: #000000 ;
scrollbar-shadow-color: #000000 ;
scrollbar-highlight-color: #C0C0C0 ;
scrollbar-darkshadow-color: #C0C0C0 ;
}
</style>
Step2 − スクロールバーの色
face colorとは実際にページで使われるスクロールバーの色です。track colorとはスクロールバーが動くトラックの色になります。Arrow colorとはスクロールバーの上下にある矢印の色です。Shadow colorはスクロールバーの色です。Highlightはスクロールバーをクリックしたときに付く色です。Dark Shadowは上下の矢印の影を指します。
Step3 − スクロールバーの色の変更
ヘックスカラーコードを好みの色に変えて使ってください。必要ならHex Chartを参考に！
引用:Web Design Library 著者:Depiction.net翻訳:atuk
スポンサードリンク
