CSS3のアニメーションテクニック

クリックしたメインメニューのサブメニューを開く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クリックした項目のターゲットから開けるサブメニューを選んで、その設定を変更します。
講師:
08:44

字幕

このレッスンでは アコーディオンメニューの 一番基本となる動き メインメニューを クリックした時に サブメニューを 開いたり閉じたりすると ゆう動きを加えたいと思います 選択したものを設定すると ゆうと 何かプログラムを組まなければいけないと ゆう気がしてしまうんですが ちょっとした仕掛けを加えることで この動きを CSSで実現してみます 何かというと、このHTML のあとをご覧ください まず最初のメインメニューをクリックすると 「メニュー01」 とゆうターゲットが 「識別子」言いますけれども 示されます 二番目ですと 「メニュー02」 そして 一番下のclose クリックすると 「ターゲットがない」と ゆうことになっています このターゲットとして示される識別子を なんとか拾って CSSの設定を行うと ゆう そういう流れになるわけです ドリームウィーバーで まだメニューの 開け閉じの設定がしていない HTMLドキュメントを開きました ボディ要素の方を確認しておきましょう メインメニューの項目 ul要素の中の リスト要素なんですけれども クラスはタイトルとなっています そして そん中に a要素を含んでいて 先ほど 確認した通り ターゲットの指定があります そして そのターゲットの指定 された「メニュー01」 と同じ名前のID属性が このa要素には設定されています 二つ目の メインメニューの項目も同じで 「メニュー02」というターゲット そして それと同じ IDといゆうのが 設定されています でもまだ この段階では メニューの開け閉じと CSSの設定はされていません 現在の状態を確認するため ブラウザーで見てみましょう ファイルメニューから ブラウザーでプレビューで グーグルクロームで開きます サブメニューの ハイライトはあるんですけれども メインメニューをクリックしても メニューの開け閉じは起こりません けれども 先ほども見た通り ターゲットの設定をしてありますから 一個目をクリックすると「メニュー01」 二個目をクリックすると「メニュー02」 closeをクリックすると 「ターゲットがない」と ゆう状態の設定まではできています では 最初にまず 仕掛けの話は置いといて メニューを閉じてしまいます サブメニューを閉じた状態にします そのため また ドリームウィーバーに戻ります サブメニューを閉じるには サブメニューの ul要素 の中の サブメニューの項目 この高さをゼロに潰します この項目というのは メインメニューの li要素 クラスがtitleです その中の 入れ子になった ul要素 にある li要素の中の a要素ですね えー この高さを ゼロにしてしまえばいい とゆうことです では CSSの方に みて見ましょう メインメニューの class titleの中の ul要素の li要素の a要素と これがその セレクターですね では 高さを ゼロにしてしまいます プロパティはheight そして 0ピクセルと まずこれで メニューが サブメニューが 閉じると ゆう動きだけはできています。 動きというが 閉じてしまってた 状態ですね 一旦保存して確認しましょう ブラウザーでプレビューの グーグルクロームです 閉じてしまってますね クリックしても開きません 開く設定はこれから行いますので またドリームウィーバーに戻りましょう まず仕掛けの段取りを確認しましょう メインメニューの項目をクリックしますと ターゲットが指定されていますので これが URI あるいはURL の最後に 識別子としてにつきます そして その識別子をとってくる セレクターの設定の方法があります これからお話しますけれども その同じ名前がここにありますから つまり この要素を とってくることができるわけです でも 設定したいのは メインメニューの項目ではないですね その後にある ul要素 の中の リスト要素にある a要素を 示して その高さを元の状態に戻すと ゆうふうにしたいわけです ですから ここで確認しなければいけないのは 識別子から ID要素を表す そういったセレクターの方法と そのセレクターで 指定されたもののすぐ後にある要素 を 表す この二つは確認しておく必要があります ここでまず使うのは ターゲット擬似クラスです これはURI もしくはURLに加えられた ターゲットの識別子 それと一致する ID要素を表します ですからクリックしたターゲットと 同じ名前のついたID それをセレクターとして取ることができます 次にその要素 そのものじゃなくて、その要素の次にくる 「隣接セレクター」と言いますけれども +記号で表します これを使うと 直後に隣接する要素を とってくることができます ですから ターゲットの 擬似クラスとこの隣接セレクター 二つ組み合わせれば今回の アコーディオンメニューの開け閉じと ゆうのができそうです CSSでは ターゲットの識別子 と同じ名前の IDの要素を選んだら そのすぐ後にある ul要素 の中のli要素の中のa要素ですね それに対して設定を行うわけです ではCSSの方にいきましょう このtitleクラスの後に 入力をしましょっか 下にスクロールします そして今覚えた ターゲット擬似クラスを使います そのすぐ後の ul要素の 中にあるli要素のa要素ですね これが 初期状態ではゼロに潰れています ですので 高さを ゼロじゃなく 元々の高さだったんですが 30ピクセルと ゆうふうにしたいと思います ではこれでファイルを保存して 確認してみましょう ファイルの保存で ブラウザーで確認します ブラウザーでプレビューの グーグルクロームです 閉じた状態です クリックすると 開きます menuというターゲットを使って このメニュー項目の中のサブ メニューの高さを 30ピクセルにしたんですね 同じようにこちらをクリックする そうすると このクリックした サブメニューの高さが 30ピクセルになります 先ほど開いていたものは 今は、ターゲットの要素 ターゲット擬似クラス の中に 含まれませんので ゼロに戻ってしまうとゆうことになります こうしてアコーディオンメニューの 基本の動き メインメニューのクリックによって サブメニューが開けたり閉じたりと ゆう動きができました このレッスンでは アコーディオンメニューの基本の動きである メインメニューをクリックしたら サブメニューが 開けたり 閉じたりと ゆう動きを加えました その仕掛けとしては 最初 サブメニューの 項目の高さは ゼロで潰しておきます そしてメインメニューをクリックすると そのターゲットが URIにつきます それをとってくる ターゲット擬似クラスを使って さらに そのすぐ下にある 隣接セレクターですね で ul要素をとってきて そこからa要素 を取り出しその高さを30ピクセルに戻すと こういう仕掛けを使って アコーディンメニューの開け閉じを行いました

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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