CSS3のアニメーションテクニック

ボタンクリックで画像を切替える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
疑似クラスを用いて、クリックしたボタンに対応する画像に切替えます。
講師:
06:36

字幕

このレッスンでは 画面の様な photo gallery のテンプレートに 実際に 画像を加えます そして 下にある5つのボタン のクリックで 5つの画像が 順番に切り替わる様にしています Dreamweaver で まだ画像を加える前の html ドキュメントを開きました body 要素の方を見て見ましょう 一応 img 要素は 5つ揃っているんですが 加えてあるのは id 属性だけです まだ実際の ソースが加わっていません ソースを加えましょう src ですね そして 参照のボタンを クリックして 画像が連番で入っています まずは 01 photo.01 を 読み込みます 連番で入っていますので コピーしましょう コピーをして ペーストは Macintosh は command Windows では control を押しながら v ですので えー ショートカットを使ってしまいます 2つめ以降は command もしくは control v で ペーストして行きます そして 忘れずに 番号は連番に 書き換えます まだこの img 要素に対する CSS の設定は きちんとやっていません では どうなっているか と言う事を確認したいと思います ファイルメニューで保存をして ブラウザーでプレビューしましょう Google Chrome で確認します 画像が単純に 縦に並んでしまっていますね この位置揃えを CSS で行う事にしますので Dreamweaver に戻ります 5つの img 要素は id gallery と言う div 要素の中に含まれています では これらに対して CSS の設定をしましょう こちらに CSS を書き加えます まず id 要素 gallery ですね そしてその中の img に対して ポジションを設定します 絶対位置と言う事で absolute ですね 一応 left と top も 設定しておきましょう 00 です top の 0 と 言う事で 保存をして確認しましょう ファイルを保存します そしてブラウザーでプレビュー Google Chrome です 5つ全部重なっていますので 5つ目が表示されています でも位置はちゃんと整っていますので では この切り替えの設定を また CSS に書き加えます Dreamweaver に戻りましょう ボタンをクリックしたら 対応する 画像が表示されます と言う事はクリックする前は 画像が表示されていないと 言う状態にしなければなりません 表示しないと言う 設定ができるプロパティは いくつかあるんですが 後々 animation にしたいと言う 思惑がありますので 透明度 厳密に言うと 不透明度ですね opacity を 不透明度 0 と言う事は透明と 言う意味になりますので これで まず画像が 全部見えない状態になります では 本当に見えなくなったかどうか 確認しておきます ファイルを保存した上で ブラウザーでプレビューです Google Chrome で 確認しましょう 出ていません もちろん クリックしたら表示すると言う設定が されていませんので クリックしても 何も出てこないと 言う状況です では 改めて CSS の設定を続けます ボタンの a 要素には href 属性に 連番の target が設定されています no_01 から 05 までですね そして それぞれに対応した img 要素 には id 要素に同じ名前が 設定されています そうすると target で選んだ ものと同じ id 属性を選ぶと 言う そういう擬似クラスを使います target 擬似クラス これが URL に加えられた target 識別子と言いますけれども それと一致する id 要素を表す そう言う擬似クラスです これを使いたいと思います 先ほど設定した gallery の img 要素 このセレクターの後に加えましょう やはり id 属性は gallery で その中の img 要素 の target ですね 選ばれた 識別子と同じ id 属性を持つ img 要素と そう言う意味になります で opacity を 0 にしたために 透明なわけですから これを1に戻します 1が完全な不透明と言う事ですので これで表示される事になります では ファイルを保存して確認しましょう ブラウザーでプレビュー Google Chrome です 最初何もクリックしていませんので 何も出てきません クリックすると そのクリックした href 属性に設定された target が URL に 付け加わり それに対応した画像が出てきます ですから今度はクリックするたびに 出てくる画像が 違ってくると ボタンに対応した 画像が 表示されるようになりました このレッスンでは クリックしたボタン a 要素の href 属性 それが識別子に付いた時 その識別子に合致する id 属性を持った イメージ要素 これを表示するたびに CSS の設定をしました その場合 識別子として URL に付いたものを target として 指定する セレクター それは target 擬似クラスを使うと言う事です そして元々は image を全て opacity を 0 にしておいて クリックした場合その target 擬似クラスに 定めたセレクターで opacity を1にすると 言うやり方で 画像の切り替えを行ったと言う事です

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

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

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

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

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