jQuery APIでWebサイトを演出しよう

スライドショーを作ってみよう 2

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スライドショーのオプションの変更の仕方、次のスライドへのボタンを実装してみましょう。
講師:
08:01

字幕

このレッスンでは背景スライダーを更にカスタマイズすることを学びます。それではまず完成ファイルを見てみましょう。final のフォルダーを開いてhtml をGoogle Chrome で開きます。そうしたらこの背景スライダーのコントロールエリアができています。実はこの右向きの矢印をクリックするとすぐ次の画像へ、左向きの矢印をクリックすると1枚前に戻るというコントロールが実装されています。これの作り方を学びましょう。それではフォルダーに戻ってbegin のフォルダーをSublime Text にフォルダーごとドラッグアンドドロップします。そして index.html をダブルクリックで開いておきましょう。そうしたらまずナビの部分の押せるところですね。そちらを作っておきましょう。html の58行目にslide-nav という箱が作ってあります。こちらにアイコンで矢印を作りたいと思います。この html にはFont Awesome というアイコンフォントを作り出す css が既に読み込まれてますのでi という要素を作ったらクラス名を "fa"Font Awesome の略です。fa fa-caret-leftそしてもう1つクラス名を付けておきましょう。 半角スペースで区切ってprevious の prev前へというクラスを付けてそして i のタグを閉じておきます。そしてこの行をコピーしておきましょう。そして next のリンクも作りたいのでこちらをクリックしたらfa-caret-right右向きの矢印を作ってprevious ではなくてnext という風にクラス名を付けます。これで一度上書き保存をして右クリックからOpen in Browser でhtml をブラウザーで確認します。確認してみましょう。そうすると、矢印が2つ出てきました。しかしクリックしても特に何も起こりません。そして真ん中の矢印はこのようにコンテンツへのスライダーです。ただ、位置が少しおかしいですね。この真ん中の矢印の右に少し余白を作りたいと思いますのでそちらをスタイルシートで調整しましょう。Sublime Text に戻ってcss フォルダーを開きstyle.css をダブルクリックで開きます。そしてスクロールをしてmessage のエリアを探しましょう。message のエリアに少しスクロールをすると、slide-nav のクラスが付いた中のprev というクラスが付いた物にはmargin-right という右側の余白が付いています。 一応 html で確認しておきますとprevious がまず左向きの矢印で真ん中にあるのはdown というクラスが付いた矢印です。つまり真ん中の矢印の右にも余白を付けてあげればいいのでこのクラス名をコピーしてカンマを打ってペースト。そして prev を down という風に変えました。これはカンマで区切ることによって複数のセレクターに margin-right を掛けられるということです。では上書き保存をしてブラウザーに切り替えて更新を押してみましょう。そうするとこちらにもmargin-right が入ったので無事に矢印を作り出すことができました。それでは Sublime Text に戻って今度はスクリプトを書いていきましょう。html に切り替えたら1番下までスクロールをして背景スライダーというエリアを見つけたらこの終了の括弧はready 関数の終了括弧なのでこの括弧は残してここに記述をして行きます。それでは $(そしてセレクターをまず記述するのでまず戻るというボタンのセレクターを作ってそしてそこにクリックのファンクションを入れていきましょう。クリックのメソッドはclick(function) と中に入れたら括弧を打った後に波括弧を作って波括弧の内側で改行をして行きます。 ここで slide という変数を利用してdata というメソッドを使って中に backstretch という単語を入れましょう。backstretch のデータを拾ってきてそれを previous というメソッドで前に戻すという風に書いてあげます。そして行末には ; を打って同じようなセレクターを作ります。なのでこの3行分をコピーしたらペーストで同じものを作ります。後は previous をnext に変えるだけですね。next というクラスをクリックしたらbackstretch のデータを拾ってきてそれを next というメソッドで次に送るという風に書いてあげます。では上書き保存をしてChrome に切り替えて更新をしておきましょう。そして矢印の方を今回はnext をクリックします。クリックした回数だけ次に移動するのが分かるかと思います。今度は previous戻るボタンを押してあげるとこのように前の写真に戻ると思います。ちなみにこの矢印はループになっているので3枚の写真を繰り返すということになっています。では一度このメソッドが何で実装されいるかを検索しておきましょう。新規タブを開いて jquerybackstretch という風に検索をしたら、GitHub と書かれている方のリンクをクリックして、解説を読んでみましょう。 スクロールをするとこのプラグインに関する説明文が書いてありますがここにオプションが書いてあったりSlideshow APIつまり backstretch のプラグインをコントロールするためのオプションが用意されています。ここで使ったのがprevious というメソッドですね。なので backstretch のデータにprevious を与えると、ちゃんと戻るという動きをするというのが実装されているわけです。このようにプラグインを使う時は必ずそのドキュメンテーション、つまり説明書きを必ず目を通しておくと色んなバリエーションを作りだすことが可能かと思います。このレッスンではスライダーのカスタマイズについて学びました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

2時間43分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。