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

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

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

ぜひご覧ください。

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

字幕

このレッスンでは JavaScript と JQuery を使って スライドショーを実装していくにあたり 画像をローテーションさせるための 左右移動ボタン部分に スタイルシートをあてて レイアウトを調節する方法について 解説いたします まずはダウンロードしてきた こちらの arrows_css という フォルダの中に入っている index.html と Javascript.js そして stylesheet.css を エディタで開いて下さい そしてこれがそれらの ファイルを開いた状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回スタイルシートをあてる部分は html ソース上で言うと こちらの ul id="slideNav" という部分です それでは stylesheet.css を エディタで見てみましょう するとこのように書いていて 下の方に行くと この部分ですね この部分に今回ご説明する 左右移動ボタン部分の スタイルシートの記述があります それではこちらを目で追いながら 幾つかポイントをピックアップして ご説明したいと思います まずはこちらですね ul#slideNav の― 直下にある li タグ に対してのスタイルシートの指定ですが この部分は右矢印ボタンと左矢印ボタン それぞれを囲っている li タグです その li タグには このように positon: absolute; を指定しています こうすることによって 前のレッスンで指定した こちらのスライドショーの大枠部分 要するに div#slideshow こちらの position: relative; と呼応して その大枠部分の左上を基準とした 位置取りが可能となります そしてそこから  top: 96px; と書いています 要するに上から 96px の所に 右矢印ボタンと左矢印ボタンを設置する という意味です そして次に見て頂きたいのが こちらの部分です まず li#prevBtn 要するに左向きの矢印 こちらは left: -10px; と指定しています そして逆にこちらの li#nextBtn 要するに右矢印です こちらのボタンには right: -10px; としています こうすることによって左右移動ボタン それぞれの横位置の指定を 細かく指定しています それではこの状態でこちらの index.html を ブラウザで開いて確認してみましょう こちらのファイルを開きます 今回利用するブラウザは Chrome ブラウザ― を利用して確認していきます それでは開いてみましょう するとこのように表示されました まず先程指定した top 96px で この縦位置ですね こちらの画像の上端からの 縦位置を指定しています そしてこちらの左矢印に関しては -10px でしたね left: -10px; です そうすることによって 通常の位置より こちら 左側に対して 10px ずらしています そして逆に こちらのネクストボタンのほうですが こちらは right: -10px; でしたね そうすることによって 右側に 10px ずらしている状態になっています このように表示されてくれば しっかりと css の指定が なされている といった状態になります それではエディタに戻ります 以上でレッスンは終了です 今回はスライドショーの画像部分を ローテーションさせるための 左右移動ボタン部分の css コーディング方法について 解説いたしました 以降のレッスンでは 実際に JavaScript と JQuery を使って スライドショーを実装していく方法 について解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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