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

プルダウンメニューが開いたメニューのレイアウト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プルダウンメニューのもととなる開いた状態のレイアウトについて、HTMLドキュメントの内容を確かめます。
講師:
05:13

字幕

このレッスンでは プルダウンメニューを作る準備として まず開いた状態のメニュー これが html ドキュメントで どのように定義されているのか ということを確認します これが そのプルダウンメニューの 開いた状態です メインメニューが4項目あります そして真ん中の2つの項目については サブメニューが 数が3個と2個 配置されているという状態です まだこれは何もアニメーション インタラクションが加えられていません ですから マウスポインタを合わせても 何も起こらない 指のカーソルに変わるのは これは a 要素で作っていますので a 要素の証拠として 指の形に変わりますけれども それ以外のインタラクションは 何もない状態です ではこのドキュメントが どのように定義されているか Dreamweaver で 確認することにしましょう メニューが開いた状態の html ドキュメントを Dreamweaver で開いています まず body 要素の方から 確認していきましょう body 要素はリストで構成されています ul 要素がこの全体ですね 中がちょっと入れ子になっていて 見にくいかと思います この ul の部分 Dreamweaver では この三角を クリックすると たたむことができますので 入れ子になった ul 要素は たたんでしまいます そうするとかなり見やすくなったでしょう ul 要素の中に リストの項目である li 要素が 1個 2個 3個 4個 これが先程のメインメニューですね そして入れ子になった部分 ここがサブメニューにあたります 開いてみると 3項目のサブメニュー こちらも同じように開きますと サブメニューは こちら 2項目ということになります もう一度 先程のブラウザで 開いた状態を確かめて リストの構成がどうなっているか ということを頭に入れて下さい ファイルメニューから ブラウザでプレビューします メインメニューがリストとして 1,2,3,4項目あります これが ul 要素の中に 入っているわけですね そしてこのリスト要素については 真ん中の2つについては サブメニューとして ul 要素が 入れ子になっていました こちらは入れ子になった ul 要素の中に リストの li 要素が3項目あり こちらは同じく入れ子になった ul 要素の 中に li 要素が2項目ありました 構成が頭に入ったでしょうか では Dreamweaver の方に 戻ります body 要素の中に定められた メニューを表している ul 要素 その id 属性には navigation という名前が付けられています では次に CSS の方も確認してみましょう まず body 要素のフォントの定めです それから ul 要素 つまり プルダウンメニュー全体ですね につけられた id navigation に対して配置や それからリスト項目を使ってはいますけれども リストとして表示したくないので そのスタイルを設定しています 次に プルダウンメニューの中の メインメニューの部分ですね ul 要素の中の li になりますけれども その配置 それからカラーが指定されています さらに li 要素の中には a 要素がクリックする メニューのアイテムとして 設定されていますので その配置やテキストの色 それからやはりテキストには クリックした時の あの下線が付きません a 要素ですと デフォルトで下線が付きますので その下線が付かなくなります そして入れ子になった ul 要素というのは サブメニューでしたね その配置やリストとしての スタイルの設定がしてあります そして最後に そのサブメニューの中のリスト要素 つまりサブメニューのアイテムです それに対する設定がしてあります 最後にもう一度ブラウザで確認しましょう ファイルメニューのブラウザでプレビューです ul 要素で全体が作ってあります このレッスンではこの構成がどうなっているか ということを確認しました ul でリスト設定をしておいて その中にメインメニューを li 要素で4つ配置してありました さらにその中の2つの li 要素については ul 要素が入れ子になって その入れ子になった ul 要素の中に サブメニューがリストの要素として こちらは3項目 こちらは2項目 というふうになっていて それらに CSS でこのグリーンの背景や 文字の白という設定がしてありました

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

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

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

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

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

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