ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

HomeHTML&CSS講座 > Webkitブラウザでスクロールバーを自在に作る方法

Webkitブラウザでスクロールバーを自在に作る方法

投稿日:2013年6月27日   ソフトウェア:DreamWeaver

このチュートリアルではWebkitブラウザでスクロールバーを自在に作る方法について紹介します。


Step1:はじめに

Internet Explorerでは、ほとんど最初の頃からできることです。
といっても、スクロールバーのカスタマイズについての話です。
2000年7月にリリースされたバージョン5.5からは、スクロールバーの色を変えることができます。
ごく最近は、WebkitによるブラウザはIE 5.5に追いつき、色を変えるだけにとどまらず、より洗練されたカスタマイズができるようになりました。

デザインなしで出力されるブラウザ上のテーブル
カスタマイズしたスクロールバーの例



Step2:色、幅、境界線

スクロールバーは様々なコンポーネントから構成されますが、カスタマイズするのに多様な疑似要素があります。
通常のHTML要素と同じように、背景色も描画色も調整できますし、境界線も変更できます。
点や角丸のスクロールバーを、背景のグラフィックの使用に関わりなくカスタマイズできます。

以下の疑似要素を自由に設定できます。

-webkit-scrollbar { } /* affects the whole scrollbar */
-webkit-scrollbar-button { } /* arrow buttons */
-webkit-scrollbar-track { } /* slider area */
-webkit-scrollbar-thumb { } /* slider */
-webkit-scrollbar-corner { } /* sizer (only visible in TEXTAREA) */

通常は上記の通りに対応しますが、以下のように擬似要素を設定できます。

-webkit-scrollbar {
  width: 20px;
  background: yellow;
}
-webkit-scrollbar {
  width: 20px;
  background: yellow;
}

今回の例では、幅を20ピクセルにして、スクロールバーのエリア全体を黄色にしてみました。
このスライダーは美しい緑の点線で囲まれています。
さらに、少しだけ角を丸くしてみました。
ここから、操作中のマウスの状態に合わせてバーをさらにカスタマイズできます。
この擬似クラスは役に立ちます。

-webkit-scrollbar-thumb:hover {
  background: red;
}
-webkit-scrollbar-thumb:active {
  background: blue;
}

一つ欠けているところがあります。
CSSトランジションをスムーズなアニメーション表示に使うことはできません。
「hover」や「active」の間で変更出来れば特にエレガントだったでしょう。
では、将来の改善の余地はないのでしょうか?
それ以上に、クリエイティビティを損ねることは必要ありません。
エレガントで価値のあるデザインや、目立つ色を使いたいということであれば、不可能はないのです。






Step3:付加的な擬似クラス

他にもあります。
付加的な擬似クラスが大掛かりなカスタマイズであっても使えます。
ここで「:inactive-window」クラスを提案するのは、二つのクラス「:horizontal」と「:vertical」で水平や垂直のバーのデザインに対応しながら、アクティブでないウィンドウの擬似要素をデザインできるからです。

-webkit-scrollbar-thumb:horizontal {
  height: 12px;
}


Step4:最後に

フォームに複数行のテキストエリアがある場合、デザイン全体にスクロールバーを合わせる必要があるかもしれません。
そのような場合に今回の擬似要素をWebkitブラウザに使ってみてください。



引用:Web Design Library   著者:smashingmagazine.com  翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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