JavaScript + jQueryで作るスライドショー

左右移動ボタン部分のHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スライドショーを製作するにあたっての左右移動ボタン部分のHTMLコーディングの方法について解説致します。
講師:
02:59

字幕

このレッスンでは JavaScript と jQuery を使って スライドショーを実装していくにあたり 画像をローテーションさせるための 左右の移動ボタン部分についての HTML コーディング方法について 解説いたします まずはダウンロードした arrows_html というフォルダの 中に入っている この HTML ファイルと JavaScript ファイル そして Stylesheet ファイルを エディターで開いてください そして これがそれらの ファイルを開いた状態です これらのファイルを使って 今回のレッスンを進めていきたいと思います それでは 早速レッスンを始めていきましょう 今回はスライドショーの中の画像部分を 左右にローテーションさせるための 左右移動ボタンの箇所についての HTML コーディングの方法について 見ていきたいと思います 今回のこちらの index.html には そのコーディング部分がすでにこの部分で 反映されている状態です では この部分についていくつかポイントを 見てみたいと思います まず この左右移動ボタンですが 「 ul 」タグを利用して リストで制作しています そして 「 ul 」タグには 「 id="slideNav" 」という 属性を付けています その中の「 li 」要素ですね こちらにはそれぞれ右向きの矢印の画像と 左向きの矢印の画像をセットしていて こちらの 「 id="prevBtn" 」がついた 「 li 」要素の中に入っているボタンは 左矢印の画像 そしてこちらの 「 "nextBtn" 」という 属性のついた 「 li 」要素の中の画像には 右向きの矢印の画像をセットしています そして「 id="slideNav" 」 がついたこの「 ul 」タグですが 「 id="slideshow" 」という スライドショーの大枠の 「 div 」タグの中に記載しています このように書くことで後ほど CSS で この左右移動ボタンの位置調整をする際に この「 id="slideshow" 」の 「 div 」を起点に ポジションプロパティを使って ボタンをそれぞれ左と右に分けて レイアウトしていきます HTML コーディング自体は 特に難しいこともなく シンプルな構成ですので 難しく考えずにさらっと コーディングを終えてしまいましょう 以上でレッスンは終了です 今回は スライドショーの画像を ローテーションさせるための 左右移動ボタン部分の HTML コーディング の方法について解説いたしました 以降のレッスンでは スライドショーの画像部分に Stylesheet をあてて レイアウトを調整する方法について 解説していきますので そちらも合わせてご覧ください

JavaScript + jQueryで作るスライドショー

このコースでは、JavaScriptとjQueryを使ってスライドショーを作成する方法について学習します。具体的には、手動切り替えボタンが付いた画像のスライドショーをJavaScriptとjQueryを利用して実装する方法について解説します。同時にHTMLとCSSでのコーディングの仕方やJavaScriptやjQueryの基本についても学ぶことができます。

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

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

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

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