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

ロールオーバーしたメニュー項目をハイライトする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスポインタが重なった要素の背景色と文字色を変えます。
講師:
04:52

字幕

このレッスンではメニューに必要な 最初のアニメーションとして ロールオーバーしたサブメニューの項目を ハイライトさせます 今メニューが開いた状態ですけれども サブメニューにロールオーバーすると 少し 薄いグレーの混じった青になります それから よく見ていただくと メニュー項目が もともとはちょっと 薄いグレーなんですけれども 黒よりは少し薄いグレーなんですが それが くっきりとした黒になっています まだハイライトしていない状態の HTMLドキュメントに対して このようなハイライトする設定を CSSで加えます まだアニメーションが定められていない メニューのHTMLドキュメントを ドリームウィーバーで開いてみます ボディ要素を確認しておきましょう ボディ要素はまず メニューは ul 要素で全体を作っています ul 要素には クラス メニュー とあります ですから これがメニューの 一番大元ですね その中のこれがリスト要素になっています li 要素です そのクラスにはタイトルと- いうクラスが定められています そしてサブメニューはその中に入れ子になった ul 要素のメニュー項目は li 要素で ハイライトさせたいのは a 要素に 含まれている この文字ですね では今現在の状態を確認しましょう ファイルメニューから ブラウザーでプレビューします グーグルクロームで見てみましょう メニューが開いた状態で まだ 何もアニメーションが加わっていません この状態からサブメニューに ロールオーバーした時に ハイライトする設定を加えます では確認ができましたので Dreamweaver に戻りましょう メインメニューのリスト要素は クラスがタイトルです そしてサブメニューはその中に入れ子になった ul 要素 ハイライトしてあるのは その中の li 要素の a 要素ということですね ということで そのCSSはというと タイトルの ul の li の a 要素 これが普通の状態の設定になります ロールオーバーしたとゆうことは これにホバー擬似クラス の設定を新たに加えると いうことになります セレクターを入力しましょう タイトルの ul の liの a のホバー擬似クラスですね ここにマウスポインターが重なった時の 設定を加えます カラーを設定しましょう 背景のカラーです バックグラウンド そして暗めのブルーということで ライトスティールブルーいう設定にしました まずこれで確認してみましょう 一旦保存します そしてファイルメニューから ブラウザーでプレビュー グーグルクロームで確認します 開いた状態は最初と変わりません マウスポインターを重ねると ハイライトがされると 背景色が変わっていますね あともう一つ変えるんでした 文字をくっきりとした黒にすると いうことですので また Dreamweaver に戻ります この同じセレクターにもう一つ 文字の カラーの設定を加えます。 カラーで これはもうくっきりとした黒にしますので ブラックです ではファイルを保存して ブラウザーでプレビューします グーグルクロームでもう一度確認しましょう マウスポインターを重ねると ハイライトし 文字が くっきりとした黒になっていますね これだけ 最低限のアニメーションですけれども まず一つ目が設定できました このレッスンではサブメニューの項目に マウスポインターがロールオーバーした時 ハイライトをさせるという設定を加えました CSSとしては メインメニュー項目の タイトルクラスの 中のサブメニューを示す ul 要素 このサブメニュー項目 li 要素の中の具体的には a 要素にホバーした時 マウスポインターが重なった時に 背景色を暗めのブルーにし 文字を黒にするとこの設定で ハイライトができました。

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

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

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

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

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

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