電網通信あみあみ
あみあみの目次へ
ページ上部へ

これならできちゃう!

【 魅力あるサイトを作成しよう(17) -- jQuery でできる色々な演出を見てみよう!3 】

ますますWebの勉強に勤しむあみですが・・・。

ami
今日も「jQuery」のお勉強です!
gen
前回とはまた違って、今回は割と地味だけど便利な機能を使ってみようかと思うんだ。
ami
地味?
gen
裏方さん的な、あったら嬉しい機能を紹介するよ。
まずは画面をスクロールしたときに使うものから。
一つ目は、スクロールしていくとページの途中で「ページ上部へ」移動するボタンを表示させるプラグインだ。
ami
ページの途中で?
gen
ページをある程度スクロールして行くと、右下に「ページ上部へ」というリンクが自動的に表示されるんだ。
ページの途中でいつでも上部に戻れるようになるので、結構便利だよ。
ami
本当だ、右下にボタンが現れた。
gen
一定の距離をスクロールすると表示されるようにしてあるから、不要なときは表示されないんだ。
ami
邪魔にならないんだね。
gen
2つ目は、スクロールの途中で見せたいものを表示させるプラグインだよ。
ami
今度のもスクロール関連なのね。
gen
画面をもうちょっと下の方までスクロールしてみてくれる?
ami
んー。
あ、タイトルバナーが表示された!
gen
今回はバナーを表示してみたんだ。
ここにメニューを表示させれば他のページへの移動も楽になるよ。
他にもいろいろ使い方がある便利なプラグインなんだ。
ami
売れ筋の商品を紹介したいね!
gen
そういうのもいいかもね。
次は一覧表などで便利なプラグインだよ。
ami
普通の表組に見えるけど。
gen
マウスカーソルを表の上にのせてみてくれる。
日 付 08:00 09:00 10:00 11:00 12:00 13:00 14:00 15:00 16:00
01日(月)                                    
02日(火)                                    
03日(水)                                    
04日(木)                                    
05日(金)                                    
06日(土)                                    
07日(日)                                    
08日(月)           A                        
09日(火)                                    
10日(水)                                    
ami
色が変わった!
gen
マウスカーソルが今どこの項目を指定しているかがわかりやすいようになっているんだ。
「A」にマウスカーソルをあわせると「8日(月)」の「10時後半」にあることがわかるよね。
ami
これは便利だねー。
gen
これは表組み一般に利用できるから、応用範囲が広いよね。
ami
うちのお店のサイトに使ってみよう!

出典:http://www.finefinefine.jp/

次回をお楽しみに!