スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSSでスクロールバーの色を変更する

CSSでスクロールバーの色を変更する

投稿日:2006年11月14日   レベル:初心者    ソフトウェア:DreamWeaverGoLiveFrontPage



色の付いたスクロールバーを見たことあるでしょう?そしてそれをどう作るのか疑問に思ったことはありませんか?とても簡単です。コードの記述とその解説を紹介します。
スクロールバーの画面


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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング