皆さんは、普段HTMLの表現の1つである、スクロールバーって使ってますか?
スクロールバー自体の色や背景色を指定してデザインしていたのはもう昔のお話です。
これからは、下の画像のように、スクロールバー自体を画像で置き換えちゃいましょう。

これは、fleXcrollというツールです。
ツールといってもjavaScriptで動作するので、導入も簡単です。
インストールやサンプルは以下のサイトでどうぞ。
http://www.hesido.com/web.php?page=customscrollbar
一番の特徴としては、画像で置き換えるなどの指定を全てスタイルシートで指定出来てしまうことでしょうか。
指定方法は以下のような感じです。
HTML
SOME BIG CONTENT THAT WOULD CAUSE SCROLL BARS
CSS
#mycustomscroll {
width: 290px;
height: 330px;
overflow: auto;
position: relative;
}
とっても簡単です。
サンプルも豊富に用意されているので、試してみてはいかがでしょうか。
ちなみに、http://nepacha.com でも利用させてもらってます。とても綺麗に表示できています。
この記事の関連記事(tag検索)⇒ WEBビジネスを始めよう! Tools ブログ改造
あなたの日常に彩りを!ほかには無いWEBライフハック情報などをご紹介しています!
↓このサイトのRSS購読はこちらから↓