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

画像部分のCSSコーディング

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

ぜひご覧ください。

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

字幕

このレッスンでは JavaScript と jQuery を使ってスライドショーを実装するにあたり ローテーションする画像部分に スタイルシートをあてて レイアウトを調節する方法について 解説します ダウンロードしてきたこちらの images_css というフォルダの中に入っている― こちらの HTML ファイルと JavaScript ファイル そして CSS ファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めましょう 今回スタイルシートをあてて行く場所は HTML ソース上で言うと こちらの ul#slideBox という箇所です では CSS ファイルを開いてみましょう こちらが CSS ファイルです この中には既に ローテーションする画像部分の― スタイルシートの記述がなされている状態です こちらの部分を目で追いながら 実際にどのように スタイルシートをあてているか ― そのポイントをいくつか見て行きましょう まず こちらのスライドショーの大枠となる div#slideshow こちらの部分ですが このように width 840px と height 264px の指定をしています これはスライドショーの 一番の大枠となる横幅と縦幅です これを指定しています このサイズは制作したいスライドショーの デザインにもよりますが 今回はスライドショーに含まれる ローテーションする画像の― 1枚分の横幅と縦幅を指定している形です こちらには position relative という 記載をしています こうすることによって前のレッスンで HTML コーディングした― 左右の移動ボタン あちらの位置調整を こちらの div#slideshow を基点に 行うことができるようになります 次にスライドショーの大枠の中に含まれる― 実際にローテーションする画像の部分の スタイルシートの指定が こちらになります まず こちらの ul#slideBox の部分ですが 同じように width と height を画像1枚分の 横幅と縦幅に指定しています こちらに overflow hidden と書いています こうすることによって スライドショーの枠から溢れた各画像― 要するに5枚あったら1枚を除き 残りの4枚部分です この部分を画面上から 隠すように指定しています こちらの ul#slideBox にもこのように position relative を指定しています こうすることによって この ul#slideBox の中に含まれる画像― 今回は5つありますが それらの画像の位置合わせを position プロパティで指定できるようになります 最後に その ul#slideBox の中に 含まれる各 li タグです 要するにそれぞれの画像部分です その画像部分にも同じように 横幅と縦幅の指定を 画像1枚分の横幅と縦幅の指定にしています そして position absolute として 「 top 0 」 「 left 0 」 と指定しています こうすることによって先程指定した ul#slideBox の― position relative に対応して 各バナーの位置合わせを 今上から 0 px 左から 0 px の位置に 調整しているといった状態になります こちらの ul#slideBox の左上を基準にして 要するに今この slideBox の中に 含まれる画像は 全て同じ位置に重なって表示されている といった状態になります それではこの状態で一度 index.html を ブラウザで開いてみましょう こちらのファイルをブラウザで開きます 確認に利用するブラウザは 今回は Chrome ブラウザです ではこちらを開いてみます すると このように表示されました 今 E という画像が表示されていますが こちらの E というバナーの下には A B C D といった4つの画像が 隠れている状態となっています 後のレッスンではこれを横並びに 一列で並べる方法についても 解説していきますのでそちらも合わせて 参考にしてみて下さい では エディターに戻ります 以上でレッスンは終了です 今回はスライドショーの画像部分の CSS コーディングの方法について解説しました 以降のレッスンではスライドショーの 画像をローテーションさせるための― 左右の移動ボタン部分の CSS コーディングの方法について解説しますので そちらも合わせてご覧ください

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

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

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

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

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

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