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

ボタンのロールオーバーとクリックの表現を与える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
疑似クラスとセレクタを使って、ボタンの要素にロールオーバーとクリックの表現を与えます。
講師:
10:48

字幕

このレッスンでは画面にある様な フォトギャラリーのテンプレートに対して 下に並んでいる5つのボタンこれに ロールオーバーやクリックの表現を 与えてみたいと思います ロールオーバーすると薄いグレーに変わります もっと分かり易い様に少し拡大してみましょう "表示" メニューから "拡大" もう1回くらい拡大します ロールオーバーすると薄いグレーに変わり そしてクリックすると もう少し濃いグレーになります ロールオーバーした時とクリックした時では 少し濃さが違いますね そしてクリックした所が グレーが濃いまま残っていて クリックを変えれば 順次選ばれたボタンがこれであるという事が 分かる様な表現になっています ボタンのロールオーバーや クリックの表現を加える前の HTMLドキュメントを DreamWeaverで開きました 要素を見てみましょう 要素はギャラリー全体が "gallery" と言う "id" 属性の 要素で囲まれています その中に要素でリストがあり 個々のボタンは 要素の中に要素を含んで 「聞き取れない」5つある訳なんですね そしてこれらがCSSでボタンの様な 丸い凹んだ表現になっています まだインタラクションはありませんので この状態で確認してみましょう "ファイル" メニューから "ブラウザーでプレビュー" します "Google Chrome" で 開いてみましょう まだロールオーバーしてもクリックしても 表現は何も変わりません これに対してロールオーバーと クリックの表現をこれから加えていきます ではDreamWeaverに戻りましょう ロールオーバーは "hover" 疑似クラスで加えます ですからここでまず "id" "gallery" ですねそして "ul" の "li" の "a" の "hover" 疑似クラスで マウスポインターが重なった時に 色を変えます "background" です 暗いグレーにしますので "darkgray" と では保存して確認しましょう ファイルを "保存" します そして "ブラウザーでプレビュー" です マウスポインターを重ねますと 薄いグレーに変わります では又DreamWeaverに戻ります ボタンの表現に手を加える前に フォトギャラリーとしての準備をしておきます フォトギャラリーですから 当然画像が入る予定です まだ予定ですので "img" イメージ要素の タグだけ 要素だけ作っておきます そして後々の為に "id" 属性を加えます "no_01" とします ボタンが5つありますので 画像も5つという当然予定です ですからこれを "コピー" しまして あと4つ "ペースト" します ちょっとインデントずれましたけども これはこの後直しましょう とりあえず "ペースト" だけ 5つ分加えます そしてインデントをこちらとこちらを直し そして "id" 属性は 当然みんな変えないといけませんので 連番とします さてこの "id" はですね要素の "href" の方にも 同じ名前を加えておきます "img" 要素の "id" 属性と 同じ様に名前を付けますので "no_01" "no_02" "no_03" "no_04" "05" じゃないですね "no_05" です ではまたファイルを保存して まだ表現加えていませんけど ちゃんとターゲットが出るかどうか 確認したいと思いますので 一旦ファイルを "保存" して "ブラウザーでプレビュー" します "Google Chrome" です ボタンの表現には ロールオーバーしかまだありません クリックしても ボタンは何も変わりませんけれども クリックするとターゲット "no_01" "no_02" "no_03" "no_04" そして最後の "no_05" という所まで ちゃんと出ましたので ではボタンの表現に入りましょう DreamWeaverに戻ります クリックしたボタンの 要素に定めた "href" 属性 このターゲットの記述をキーにして どの要素がクリックされたかという事を 確かめてその色を反転させたいと思います そのために使う疑似クラスがあります それは "target疑似クラス" です この "target疑似クラス" というのは "URI" もしくは "URL" と考えても結構ですが そこに加わったターゲットです これを識別子と言いますけども それと一致する "id" 要素を表します もう1つこれと組み合わせで使いたいのが "一般兄弟セレクタ" ニョロと言ったりしてますけども 実際にはこれ "チルド" と言います "ニョロ" っとしたあの記号ですね これは何かと言いますと 構文は2つのセレクタの間に この "一般兄弟セレクタ" を置いて 第1セレクタと一致する第1セレクタよりも 後にある第2セレクタを選びます 第1セレクタの後にある 第2セレクタに合う要素 これを選ぶのが "一般兄弟セレクタ" "チルド" です "img" 要素の "id" 属性が 1つ修正し漏れていましたね "5" 番です 一旦保存しましょう さて "target疑似クラス" を どう使うかと言いますと 例えばこのボタン 要素なんですけどもクリックすると この "no_01" と言うのが ターゲットとして "URI" に入ります "URL" と言っても結構です そうするとこれに一致する "id" を持つ つまりこの "img" 要素というのが "target疑似クラス" で セレクトする事が出来ます まずそこまで書きましょう "id" 属性 "no_01" です これがターゲットになった時と でも選びたいのは それと一致する要素ですね という事なので それと一致する先程の "チルド" です そうするとそれに近い "ul" 要素 その後の "ul" 要素ですね 選ばれた "no_01" よりも 後の "ul" 要素の中の "li" 要素そして要素 それを選びたい訳ですがその中でもしかも "href" に "no_01" が含まれているもの という事ですのでこれを指定します "ペースト" しましょう その場合にカラーを変えたい訳ですけども "background" ですね もっと濃いグレーという事で "gray" という風にします そしてファイルを "保存" して ブラウザーで確認しましょう "ブラウザーでプレビュー" "Google Chrome" です まだ1個だけしかつけてませんけれども 最初のボタンをクリックすると 濃いグレーになりました 後のボタンの設定がまだありませんので 後のボタンをクリックしても 何も起こりませんが 一番目のボタン "no_01" だけが反応しています つまり同じ事を "no_02" 以降も 行えばいいという事ですね ではDreamWeaverで 作業を続けましょう "target疑似クラス" を使った セレクタを増やします "gray" にするのは一緒ですので コピーしてしまいましょう "コピー" して やはり後4つ "ペースト" します "3" 番ですね "4" 番 "5" 番です そして "5" 番の方は カンマが要りませんので消します まず頭のクラス 入りの所ですね これを "2" 今度は忘れない様に "3" "4" "5" とします 同様に "2" "3" "4" "5" です ファイルを "保存" して ブラウザーで確認しましょう "ブラウザーでプレビュー" "Google Chrome" です 今度はクリックするとクリックしたボタンが グレーに 濃いグレーに変わっています このレッスンではボタンの ロールオーバーとクリックの表現を加えました ロールオーバーはお約束通り "hover" 疑似クラス そしてクリックについては "target疑似クラス" を使い 更に "隣接兄弟セレクタ" あるいは "一般兄弟セレクタ" とも言いますけれども "チルド" を使って 選ばれたボタンがどれかを判別しました

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

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

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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