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

ロールオーバーとロールアウトでメニューを開け閉じする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
displayプロパティでサブメニューの要素の表示・非表示を切替えることにより、サブメニューを開け閉じすることができます。
講師:
05:12

字幕

このレッスンでは プルダウンメニューをどうやって 開いたり閉じたりするかということについて CSSの設定をご説明します 今これはプルダウンメニューが まだ閉じている状態です 真ん中の2項目に プルダウンメニューがありまして ロールオーバーすると プルダウンメニューが出てきます それから文字の色も どこにカーソルが乗っているか分かるように グリーンに変わっています ではこれをプルダウンメニューが開いた状態 から設定したいと思いますので プルダウンメニューが開いた HTML ドキュメントを Dreamweaver で 見てみたいと思います まずボディ要素の方は プルダウンメニューを作っている 大元の ul 要素 こちらには ID に「ナビゲーション」 という名前が付けられています そしてリスト項目が並んでいるのですが サブメニューはその中に入れ子になった この ul 要素 それからもう一つ こちらの ul 要素ということですね ではこれらの ul 要素が 開いたり閉じたりするように CSSの方を設定してみましょう ul 要素の ID がナビゲーションでした その中にリスト要素があり サブメニューはその中の ul 要素 入れ子になった部分ですね これを始めは閉じておくということになります 閉じておくということは 見えないようにすればいいので display のプロパティを 見えないというのは none ですね これで見えなくなりました でも見えなくなったままではいけませんので マウスポインタが重なったら 開くようにしましょう 重なったというのは ホバー擬似クラスになりますね ナビゲーションの中の リストに ホバーした時の ul 要素に対して display が none になっていますので none になっていないものに すればいいですね display を block にしましょう これでファイルを一旦保存します ブラウザで確認しましょう ファイルメニューの ブラウザでプレビューです メニューが閉じています そしてマウスポインターを重ねると サブメニューが開く 外すと閉じるということで 最低限のプルダウンの動きにはなりました もう一つポインターが重なった時 「これがちゃんと選ばれていますよ」と いうことが分かるように 文字のかなを変更したいと思いますので また改めて Dreamweaver の方に戻ります メニューの項目は naviagtion の ul 要素の中のリスト要素の2 a 要素として定められています そこにアイテムの文字があります そこに重なった時ということですので これをちょっとコピーして 使ってしまいましょう コピーしまして ペーストです もちろん全くこの字ではありません 重なった時ということですから リストに hover ですね リストの a 要素に hover です そしてその場合にカラーを 明るいグリーンにしましょう 数字は合っているでしょうか? 数字が間違っていると カラーが変わりませんので 注意をする必要があります では一旦保存をして ブラウザで確認します ブラウザーでプレビューです マウスポインタを重ねた時に 明るいグリーンに変わります サブメニューも同様です このレッスンについてまとめましょう Dreamweaver で HTMLドキュメントの方を開いて確認します サブメニューというのは 入れ子になった ul 要素でした その display のプロパティを none にしておくことで 始めはサブメニューが開いていない 見えない状態になっている それをホバーした時 hover 擬似クラスで マウスポインターが重なった時 ブロックに指定し直してあげることによって 見えるようになると これでメニュー出し 消しができるようになります それからアイテム項目 メニューの項目について 色が変わるようにしたのは リストの a 要素の hover 擬似クラスで カラー 文字カラーをグリーンに設定したと いうことでした

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

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

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

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

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

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