※JavaScriptをONにするとflashブログパーツが表示されます

間もなく発動開始!!ネパ茶.com by kumanomiさん

カンタンCM作成サイト コマーシャライザー

2008年06月11日

スクロールバーを画像で装飾するfleXcrollが美しい件

皆さんは、普段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購読はこちらから↓

RSS登録はこちら RSSリーダーに登録する

posted by kumanomi at 00:40 | Comment(0) | TrackBack(1) | WEB LifeHack

コメントを書く

お名前:[*]

メールアドレス:

ホームページアドレス:

コメント:[*]

認証コード: [必須入力]※画像の中の文字を半角で入力してください。


この記事へのコメント
この記事へのトラックバックURL

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
 
概要: こんばんは。 いままで、スクロールバーを変えるのって Flashか、IEならHT...
from: optivisions.com
2011-06-27 00:03
 
関連資料

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。