はじめてのCSS3アニメーション

このチャプターで何をつくるのか

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このチャプターでつくるコンテンツと学習項目を始めに確認します。
講師:
02:13

字幕

このレッスンでは チャプター全体を通して 作るものと 学習する項目について簡単に確認をします 作るものは このような プルダウンメニューです プルダウンメニューのサブメニューが この真ん中の二つにあるのですけれども アニメーションで伸びるように開き 縮むようにして閉じます あるいはこのカラー 選んでいる マウスオーバーしている 項目のカラーも これはアニメーションで変えています それから さらにアニメーションできない プロパティといったものもありますので そうしたものも確認していきます html ドキュメントを Dreamweaver で開きました body 要素だけ 簡単にみておきましょう メニューは ul 要素で リストとして作っています その中のメインメニューの項目が li 要素で用意されていて サブメニューはその入れ子の ul 要素として作られています そしてアニメーションがない状態の メニューのレイアウトもちょっと見ておきます アニメーションのないということはつまり 開いた状態なのですけれども このような構造になっています サブメニューもこのように 普通に全部出ています それが先程のメニュー 確認しますと 初めは出ていなくて 伸び縮みさせているんですね 最初はつぶしておきます そしてマウスポインタが重なったら それが伸びるようにして表れてくる という形になっています このレッスンでは チャプター全体の内容を 簡単にご紹介しました 作るのは プルダウンメニューです 学習する項目としては ロールオーバー ロールアウトで アニメーションをさせる そのアニメーションのさせ方として 要素を伸び縮みするということでした さらに アニメーションができない プロパティというのがありますので それも技術的な項目ですけれども 簡単にご紹介をします

はじめてのCSS3アニメーション

最近のブラウザではCSS3の実装が進み、JavaScriptを使わなくてもダイナミックでインタラクティブなコンテンツが作れるようになってきました。このコースではこれまでの静的なCSSの基礎を学んだ方を対象に、そのようなアニメーションをCSSでどう定めればいいのか、その書き方や考え方について解説します。

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

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

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

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