ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング