デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:小ネタ系
2章:ショーケース系
3章:カルーセル系

プラグイン

実用的なプラグインがたくさんあります。

1章では名脇役となるプラグイン

1章ではコンテンツ作成の名脇役となりそうなプラグインを紹介しています。各項目は独立しているので、興味のある項目だけでもチェックしてみましょう。

2章ではショーケースの作成

2章で紹介しているのは、非常に高機能なショーケース(スライダー)を実現するNivo sliderです。右の画像をクリックするとサンプルを確認できます。

このサンプルではショーケース上にマウスを重ねるとインターフェイスが表示される仕様に設定したものですが、他にも様々な仕様変更が可能です。

プラグインにはcssファイルも含まれており、左図のようなインターフェイスデザインも簡単に実現できます。しかし一方で、自分好みのデザインにカスタマイズするには付属のcssファイルを解読しなければならないので結構大変です。

3章ではカルーセルの紹介

カルーセルとは回転木馬(メリーゴーランド)のことで、WEBではサムネイルが列をなして移動していく演出を指しています。

耳慣れない言葉かもしれませんが、左図のようなサンプルを見かけたことがあるのではないでしょうか?画像をクリックするとサンプルを確認できます。このサンプルでは左右に付けた○ボタンをクリックしない限りサムネイルは移動しませんが、一定間隔で移動するような設定にすることもできます。

またサムネイルの代わりに文字(htmlタグも利用できる)を使用すればニュースティッカーも作成できます。
→参考:carouFredSel(2)で紹介するサンプルfred2/06.html

さらにスマートフォンでの利用や2章で紹介したnivo sliderとの連携についても説明しています。2章とは独立した内容なのですが、2章を修了した後で学んだ方が良いかもしれません