WEB制作ノウハウに関する質問です。

下記URLの「お知らせ」欄の様に、スクロールバーをカッコいいデザインの物で作るには
どんな方法がありますか?
下記URLのソースコードを見ている限り、CSSのdivの中に、dl dt タグにて、テキストがPHPにて呼びだされています。
知りたい部分は、スクロールバーが何の形式のファイルで、どこから、どう呼びだされているかという事です。
http://www.ohs.ac.jp/

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2010/06/20 22:43:03
  • 終了:2010/06/27 22:45:02

回答(5件)

id:doropon No.1

回答回数94ベストアンサー獲得回数162010/06/20 23:26:27

ポイント20pt

javascriptで動いてますね。

jQueryのpluginでそういうのがあるようです。

jQuery以外に

http://www.ohs.ac.jp/common/js/top.js

を読み込んでいて、この中にスクロールのことが書いてあります。

div の id が information

がスクロールしているボックスの外側だと思います。

jQuery自体の使い方やjavascriptそのものが不得手なので自分では書けないですが、

top.jsから引用させていただくと

	$('#information dl').jScrollPane();
	$("#information .jScrollPaneContainer").width("220px");

あたりを推測するにdomの操作と思います。

細かい動きは私では説明できず申し訳ないです。

phpで呼び出されているというのは、なになのかわかりませんが、

TOPページ自体はindex.phpのようなのでphpは使っていると思いますが、

スクロール自体は関係ないかと思います。

id:hanako393 No.2

hanako393回答回数1142ベストアンサー獲得回数872010/06/21 07:08:50

ポイント20pt

http://www4.nasuinfo.or.jp/~gushioda/css/page08.html

あとはCSSでスクロールバーを細く設定するだけです。

id:koriki-WeKan No.3

koriki-WeKan回答回数342ベストアンサー獲得回数202010/06/21 07:21:20

ポイント20pt

HTML+CSS+JavaScriptで作られている。

http://www.n-son.com/scripts/jsScrolling/

id:xyzzz No.4

xyzzz回答回数2ベストアンサー獲得回数02010/06/22 17:02:04

ポイント20pt

> 知りたい部分は、スクロールバーが何の形式のファイルで、

> どこから、どう呼びだされているかという事です。

ソース9行目に書かれているindex.cssを見てみてください。

jScrollで検索していって、中身にbackground:urlと記述されてる場所が見つかると思います。

ここで使用されている画像がスクロールボタンの上下画像になります。拡張子はgifになってます。

スクロールバーの部分に関しては、画像ではなくブロックの背景に色をつけてるだけです。


スタイルシートのoverflowプロパティで擬似フレームが作成可能です。

この時、scrollを指定することによって、スクロールバーが出てきますが、

これはブラウザのスクロールバーと同じデザインになります。

このスクロールバーのデザインを自分で作成したものに変えたい場合、JavaScriptを使用します。

具体的には、overflowプロパティにhiddenを記述して、スクロールバーを出さないようにします。

次に用意した画像あるいはブロック(上下ボタン、スクロールバー)を適当な場所に配置し、

それら画像あるいはブロックに対してイベントを記述します。

擬似フレームのすぐ右側に、それら画像群を同じ高さに収めると自然な仕上がりになります。

イベントの中身は、上下画像がクリックされたら擬似フレーム内を20px上下に移動する。

スクロールバーがマウスで移動されたら、移動距離によって擬似フレーム内を移動する。

大雑把に言うとそんな感じで実装することになります。


件のページではjQueryのjScrollPaneプラインを用いて実装しているみたいです。

JavaScriptの知識がある程度必要ですが、上記の方法で自分で実装するよりは簡単なはずです。

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane....

↑はjScrollPaneのプラグインサイトです。このサイトのExamplesのソースは、

件のページよりもコードも少なく読みやすいと思うので参考にしてみて下さい。

id:watalucky777 No.5

watalucky777回答回数1ベストアンサー獲得回数02010/06/23 13:22:35

ポイント20pt

スクロールバー部分のデザインはjQueryというjavascriptのライブラリを使用しているようです。

ソースでいうと、以下の部分でjquery本体とそのプラグインを読み込んでいます。

(おそらく、この中のtop.jsというもののみがサイト制作者オリジナルのソースでしょう。

jquery.vgrid.jsとjquery.easing.jsはとりあえず、

前者はウィンドウサイズを変えた時の動きの制御用、後者はページ内移動時のアニメーションの制御用と考えておけば問題有りません)

<script type="text/javascript" src="/common/js/jquery.js"></script>

<script type="text/javascript" src="/common/js/jquery.vgrid.js"></script>

<script type="text/javascript" src="/common/js/jquery.easing.js"></script>

<script type="text/javascript" src="/common/js/top.js"></script>

スクロールバーのカスタマイズをしたいだけでしたら、jQueryとjScrollPaneというプラグインを使用するのが一番簡単ではないかと思います。

jScrollPaneについては以下のブログで分かりやすく解説されているのでご参照下さい。

http://www.moongift.jp/2009/03/jscrollpane/

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません