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

要素の重ね順をz-indexプロパティで変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素にz-indexプロパティを定めると、他の要素との間の重ね順を変えることができます。
講師:
03:30

字幕

このレッスンでは要素の重ね順を変える z-index というプロパティについて ご紹介し その使い方を解説します 具体的にはこんなサンプルを作りました マウスポインターを重ねると それぞれバラバラに角度の違う カードが 拡大して 角度がまっすぐになるんですね しかも影をぼやっと伸ばしているために 三次元で手前に滑り出してくるように見えます ところが残念ながら この重ね順というのは そのままでは変わらないんです ですから 滑り出してきているように見えるんですが 手前にあるものが 常に手前にあるまま こういう場合 z-index のプロパティを使えば 手前に出てくるものは 必ず重ね順の前にくると いう風に設定することが可能です ではこのコンテンツの元のドキュメント HTMLドキュメントを見て z-index を設定してみましょう Dreamweaver で HTMLドキュメントを開きました このボディには a 要素のあのカードの a 要素が四つあって それぞれに共通のスタイルが book というクラスで定められています ですからアニメーションはこの book に 設定してあるわけですね ではこの book がどんな 設定になっているか CSS の方も確認してみましょう アニメーションは book の中に transition で設定してあります 最初 少し小さめの短めの影が 濃く設定されているものが マウスポインターが重なった時 hover 擬似クラス等ですね の時に ぼやっとシャドウが広がるようになっています それから角度が transform でゼロとまっすぐになり scale 拡大縮小が 1.2 倍になる ということでアニメーションができています この時に手前に出したいわけですね ですからここで z-index を指定します z-index には整数を設定します ただ1234と 几帳面に連番をふる必要はありません 大きい数字ほど手前にきます ですから細かい設定をして たくさん番号を使うようであれば 例えばいきなり10とか 100とかいう設定をしてしまっても結構です ともかく全面だとゆうことを 出したい時は例えば100と してしまって構いません ではこれで確認してみましょう ファイルを保存して ブラウザでプレビューします グーグルクロームで確認しましょう 最初の状態は先ほどと変わりません けれどもこの下の方にある カードにポイントを合わせると ちゃんと手前にきます さらに後ろまた手前にきますね 下になってしまいましたけれども 手前にくる 手前にくる ということで きちんと 重ね順が設定されました このレッスンでは要素の重ね順を設定する z-index というプロパティをご紹介しました z-index プロパティには整数を設定します 連番である必要はありません 大きい数字を与えれば 大きい数字のもの要素ほど 手前にくるということでした

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

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

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

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

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

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