WebデザイナーのためのjQuery実践講座

「スライドショー機能」部分のHTML/CSSの作成方法

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「スライドショー機能」を実装する為の、HTML/CSSのコーディング方法について、いくつかのポイントをご紹介致します。
講師:
05:00

字幕

このレッスンでは スライドショー機能を 実装する為の HTML CSS の― コーディング方法について いくつかのポイントをご紹介していきます まずは ダウロードしてきた こちらの slideshow-html ― というフォルダーの中に入っている こちらの index.html ファイルと― そして こちらの css フォルダーの中に 入っているこの style.css ファイルを― エディターで開いて下さい そして これがそれらのファイルを 開いた状態です 左側には index.html ファイル そして 右側には ― style.css ファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは この index.html ファイルを ブラウザで開いてどの様に見えるのか― 確認してみたいと思います はい これがその index.html ファイルを 開いた状態です この様にもう既に予め動きの無い 部分に関しては― コーディングを終えている様な 状態となっています 以降のレッスンでは この html ファイルを ベースにしながら 様々な機能を 追加していきたいと思います 今回はスライドショーの部分の 解説となりますので― 注目して頂きたい部分はこちらの部分ですね 今はこの様な形で画像が一枚 表示されているだけですね それではこの部分の HTML と CSS の コーディングのポイントについて 確認していきたいと思います それでは エディターに戻ります それでは まず html ファイルの方から 確認していきたいと思います 今回のスライド部分はと言うと 少しに下がった所― こちらの部分ですね こちらの部分で先程のスライド部分の コーディングを行っています まずは slide という id を 付けた div タグで大枠を作って― その中にさらに div タグで枠を作っています そして その中に p タグで囲まれた イメージタグが合計 3 セットありますね そして それぞれのイメージタグには 表示させたい画像を設定しています 要するに この p タグがそれぞれ 表示させたい画像の一枠となっていて― 今回は三つの写真をスライドショートして 表示させたいという形になります HTML のコーディングとしては 以上となります それでは次に CSS の方を みていきたいと思います CSS の方はこちらの部分ですね そして こちらの部分も少し 下にずらしていきますと― こちらの部分に slide と書いてある 部分がありますね こちらの部分からスライドのスタイルを 設定しています ポイントとしては まず div id スライド そして div id スライドの直下にある― div タグ 要するにこちらの部分ですね この div タグに対して width 960 ピクセル そして height 300 ピクセル を設定しています このサイズは画像一枚の横幅 そして 縦幅のサイズと同じです そして こちらの div id スライドの 直下にある div タグに対しては― overflow: hidden を 設定しています この overflow: hidden を 指定する事によって― この div タグのサイズから 食み出した部分に関しては― 表示させないといった設定を 行う事が出来ます こうする事によって常に画面上では 一枚の画像のみを表示させる― といった事が可能になります そして 次に注目して頂きたい部分が― こちらの p タグに対してですね 先程の div id スライド そして その直下にある div タグ― そして その直下にある p タグという事で 各画像を囲っている p タグになります その p タグに対して float: left としています この様にする事で各画像が 横並びのレイアウトになりますが― 先程の overflow: hidden が ありますので 画面上には一枚の画像のみが― 表示されるだけでその他 2 枚の画像に関しては― その div タグから食み出しているので 画面上には表示されないといった形になります 以上が CSS を作成する際の ポイントとなります 一点こちらの html タグで 前の画像へ切り替えるボタンや― 次へ のボタンへ切り替えるボタンの コーディングが行われていませんね この部分に関しては後のレッスンで 解説していきますので― 今回に関しては無視して頂いて大丈夫です 以上でレッスンは終了です 今回はスライドショー機能を実装する為の HTML そして CSS の― コーディング方法についていくつかの ポイントをご紹介致しました 以降のレッスンでは jQuery と jKit プラグインを使って― 実際にスライドショー機能を実装する 方法について解説していきますので― そちらも合わせてご覧下さい

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

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

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

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

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