2017年7月26日に弊社のプライバシーポリシーが改定されました。引き続きLynda.jp日本版をご利用になることによりこれらの文書に同意されたものとみなされますので、事前にご確認ください。

CSS3 アニメーション講座

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

LinkedInラーニングの無料トライアルを今すぐ試そう

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

字幕

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

CSS3 アニメーション講座

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

2時間39分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
プラン加入者限定
発売日:2015年06月17日

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

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

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