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

要素を他の要素の手前に配置する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素を3次元のz軸で移動することができます。
講師:
04:39

字幕

このレッスンでは 要素の上に 他の要素を持ってきます これは 三次元の空間で Z軸上を 手前に動かすということになります 画像の上に テキストの領域が 上半分 重なってますね ですからこのテキストの領域というのは 画像よりも手前に持ってきてます あともうひとつ 細かいですが このボタンなんでけれども ポインターを重ねた時に ちょっとくっきりするような表現にしてみます まだテキストの領域を動かしていない HTMLドキュメントを ドリームウィーバーで開きました テキストの領域というのは div要素で 囲まれていまして クラス ブックインフォ と という名前が与えられています この中に説明や リンクのボタンがあります 現在の状況を確認しましょう ファイルメニューから ブラウザーでプレビューします 画像の下に テキストの領域が並んでいる状態です ですからまずこれを 上に Y軸上ですね Zの前にY軸上で 上に持っていきます テキストの領域は クラス ブックインフォ で定められていました ですからここで マージンを上に持っていきますので マイナスですね 75ピクセルとしましょう オートのままで構いません ファイルをいったん保存して 確認します ブラウザーでプレビューです 上に来ましたけれども 領域は下になってしまっていますね テキストだけ上に重なっているんですが とても見苦しいです Z座標で手前に持って来れば この部分は解決します では ドリームウィーバーに戻りましょう 座標の 移動や回転 伸縮というのは トランスフォームプロパティで定めます トランスフォームと そして今回は 移動です トランスレイト そして Z座標ですので Z軸で動かしますので Zです 10ピクセルほど手前に 手前はプラスになります これで確認しましょう ファイルを保存して ブラウザーでプレビューします ちゃんと手前に来ましたね あともうひとつ残っているのは ボタンにポインターを重ねた時に ちょっとくっきりさせると いうところです ボタンは クラス ブックインフォの中のA要素です そこに重なった時ということですから ブックインフォのクラスに対して A要素に ホバーですね ホバー擬似クラスを使います そして そのときに 2つ変えます まずバックグランドですね バックグランドのカラーを もとはというと ちょっと茶色なんですが これよりも暗めにしたいと思います ということで 数字は 6a191fと いう値にします 今画面に出ていますけれど ちょっと暗めの 茶色と いうことになりますね ここのところで確認できます そしてテキストです テキストは カラーですね カラーのプロパティで もとはどうだったかというと 実は白ではなく ちょっと暗めにしてあったんです というこなので 重なったら真っ白にします Yと しまして 確認しましょう ファイルを保存して ブラウザーでプレビューです マウスポインターを 重ねると くっきりしますね 背景が少し暗めになったのと さらに文字が 少し明るくなりましたから くっきりする という効果が出せました このレッスンでは テキストの領域 クラス ブックインフォに対して トランスフォームプロパティを使い トランスレイトZという関数で Z軸上 手前に持ってくるという事を行いました あともうひとつ おまけとして そのブックインフォの中のA要素に ポインターを重ねた時 バックグランドとテキストのカラーを 少しくっきりさせる方向で変換しました

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

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

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

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

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

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