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

transitionプロパティでプルダウンメニューを伸び縮みさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
transitionプロパティで要素の高さをアニメーションさせることにより、プルダウンメニューを伸び縮みさせます。
講師:
06:52

字幕

このレッスンでは プルダウンメニューの開け閉じを アニメーションにします プルダウンメニューの4項目ありますけれども その中の真ん中二つに アニメーションが設定してあります ポイントを重ねると プルダウンメニューが- 広がるように伸びていきますね このようなアニメーションを transition プロパティを使って 設定したいと思います では ドリームウィーバーで HTMLドキュメントを開けて 設定をしてみましょう まず ボディ要素には プルダウンメニュー全体の ul要素がナビゲーション という名前で設定してあり リストの形でメインメニューがあって サブメニューは その入れ子になったul要素ですね 段取りを申し上げると この中身のli要素 この高さを最初はゼロに潰しておきます そして マウスポインタが重なったら それをまた元の大きさに戻す 元の大きさというのはここです ハイト・プロパティが30ピクセル ラインハイトピクセルは同じく30ピクセル 現在この状態なのですがここをゼロにします その上でマウスポインタが重なった時 この30ピクセルに 二つを戻せばいいということですね ではここでゼロにする前に マウスポインタが重なった時の 状態を作ってみましょう その方が段取りとして作業がしやすいです ではマウスポインタが重なった時と いうのはここに入れますけれども これをコピーしてしまいましょう コピーをして ペーストです 閉じまして このul要素の中の サブメニューのul要素の中の リスト要素ですね これをこの大きさにするわけですから ここもまたコピーを使ってしまいます コピーして ペーストと そうしたら こちらをゼロにしましょう この方が作業が間違いがないですね そしてアニメーションにしますので transition というプロパティを設定します transition はこの後に transform ではありませんね transition です そしていろんな設定項目あるんですが たいていの場合は時間だけ指定すれば うまくいことが多いです 今回もそうです 0,5秒としましょう これで保存をします ファイルメニューから保存で ブラウザで確認してみましょう ファイルメニュー ブラウザで プレビューでグーグルクロームです メニューが最初は表示されていません そして 出てきますが アニメーションになっていません 何か失敗したのでしょうか 実がこれが仕様です どこを直せばいいのかご説明しますので また Dreamweaver の方に戻ります 先ほどの考え方自体は間違っていません はじめに サブメニューの項目の高さをゼロに潰しておく そして transition で アニメーションを設定します その上で マウスポインターが重なったホバー擬似クラス ここで サブメニューの中のリスト項目の高さを 元に戻す これはいいんですが実は今このままですと transition の設定が 効かなくなっています 何が問題かというとこの display です display プロパティを noneにしておくと このnoneに対して他のもの プロパティとの アニメーションができないという そういう仕様になっています 考えてみればそうですね「ない状態」と 何かが「ある状態」をトゥイーンすると それをアニメーションをするというのは ちょっと難しいですね まぁそういう考え方から きているのかは分かりませんけれども 仕様ですので display の none はともかく使えないと 他の方法で見えなくする あるいは出すと 表示するということを 設定しなければなりません ということなのでこちらも表示する display の設定は 「なし」ということになります どうすればいいかと アニメーションが設定できるような プロパティにすればいいです それは「表示」「非表示」ではなくアルファですね プロパティでいうと opacity になります ですからここで opacity 不透明度を最初はゼロにしておく これで見えなくなります 透明になりますので そしてマウスポインターが重なった時 ここでは今度は逆に opacity を 1 これが完全に不透明な状態ですね こうしてあげればいいということになります では保存します そしてブラウザで確認しましょう ブラウザでプレビュー グーグルクロームです 最初の状態は先ほどと一緒ですね ではマウスポインタを重ねてみます ちょっとドキドキしますけれども アニメーションで伸びるように サブメニューが出てきました 成功です ただし マウスポイントが外れた時 パッと消えてしまいます これについてはまた別途設定する 必要があります とりあえずは開く状態が アニメーションで伸び縮みするように 表示されたということで ここまでの設定は成功です HTMLドキュメントで レッスンをおさらいします アニメーションの設定は transition プロパティで行います 時間を秒数で指定します 今回プルダウンメニューの「出し」「消し」というのは リスト項目 ul要素 サブメニューの リスト項目の高さを 始めはゼロに潰しておいて アニメーションで マウスポインタが重なった時 メインメニューの マウスポインタが重なった時 サブメニューのリスト項目の 高さを 元に戻すというか ちゃんとした状態にすると これで考え方としては メニューの伸び縮みの形で 出し 消しができるんですけれども 一つ注意がありました display プロパティで noneを設定していると アニメーションは効かなくなってしまいます ですから「表示」「非表示」をさせたい場合 アニメーションを取り入れるのであれば display を使うのではなく opacity で 0 1で 「表示」「非表示」を切り替えると良いということです

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

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

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

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

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

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