WebデザイナーのためのCSS3実践講座

滑らかな要素の動き(トランジション)の作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
滑らかな要素の動き(トランジション)を、CSS3で実装する方法について解説致します。
講師:
06:47

字幕

このレッスンでは 滑らかな要素の動き いわゆるトランジションを― CSS3 で実装する方法について 解説していきます まずはダウンロードしてきたこちらの transition ― というフォルダの中に入っているこちらの index.html ファイルと― style.css ファイルを エディタで開いて下さい そして これがそれらのファイルを 開いた状態です そして こちらの右側には こちらの index.html ファイルを― ブラウザで表示させた状態をとなっています これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずはこちらの index.html の方を確認してみます こちらの方は四つの div タグで囲まれた テキストが用意されています そして それを表示させているのが こちらのブラウザの方ですね 四つの箱を作っているような状態です それでは まず こちらのトランジションA というボックスの方にマウスカーソルを― 置いてみましょう すると このように色が変わりましたね そして このマウスカーソルを このボックスから外すと このような形で― 元の色に戻ります 次に トランジションB の方に マウスカーソルを置いてみます すると このように色が変わって ボックスの位置が移動しましたね 更に マウスカーソルを外すと このように元の状態に戻ります 同じく C の箱にもマウスカーソルを 置いてみると このように色が付いて― 角が丸くなりましたね そして マウスカーソルを外すと このようになります そして D の方にもマウスカーソルを 置くと このように周りに― 紫色のシャドーが掛かります そして マウスカーソルを外すと このように元の状態に戻ります これらのアニメーションは全て CSS3 で実装されています それでは このアニメーションの 実装の方法についてみていきたいと思います それでは こちらの style.css ファイルの方を開きます まず 注目して頂きたいのが こちらの部分ですね この div タグ 要するに この四つの div タグですね それに対して共通してこのように transition プロパーティー― というものを付けています そして その値に 0.5s そして ease そして 0s と書いています これは左から順番に アニメーションを行う時間― そして アニメーションの緩急を表すもの そして 最後の 0s は― アニメーションの開始タイミングです このアニメーションの開始タイミングですが これは先程のマウスカーソルが― ボックスの中に入った時に どれくらいの時間を置いて そのアニメーションを発動させるか といった意味になります 今回は 0s 要するに 0 秒ですので マウスカーソルが置かれた瞬間に― アニメーションが発動します そして こちらの一番前の 0.5s ですが アニメーションの時間を表していて― 今回は 0.5s 要するに 1 秒の半分の時間で― アニメーションが展開する といった形になります そして 最後のこちらの真ん中の アニメーションの緩急を表す言葉ですが― 他にも linear や easing といったものも― 指定する事が可能です この値を変えることによって アニメーションの動き方に― 多少の変化が現れてきます さて このように div タグに transition のプロパーティーを― 設定し終えたら 次は実際に それぞれの div タグに対しての― アニメーションを実装していきます それを行っているのが― こちらの部分ですね それでは 順番に トランジションA からみていきます それがこちらの部分です まず こちらの div#transitionA ― という要素に対して hover を付けています こうすることによってマウスカーソルが 乗った時のスタイルを適用することができます そして その中には background-color として― red という値を置いています こうすることでマウスカーソルが乗った時 その背景色は赤色にする といった― スタイルの指定ができました このように書く事で先程 div タグに 設定したこちらの― transition プロパーティー これと連動してマウスカーソルが乗ったら 赤に変化していくアニメーションを発動する― といった意味に変わります こうすることでこのように マウスカーソルが乗った時に― 色が変化する というアニメーションを 実装する事が可能です では 次に トランジションB の方を 見てみましょう こちらの方は同じように background-color として― yellow としていますね そして margin-left: 100px; としています このようにすることで マウスカーソルが乗った時の― 位置をマージンレフト 100 ピクセルの 位置に変更するといった意味になりますので こちらも先程の transition プロパーティーと― 組み合わされてこちらの マージンレフト100 ピクセルの位置まで― アニメーションするといった意味になります そうすると このような感じの 動きになるわけですね では 次に トランジション C の方を 見てみます それがこちらの部分ですね こちらの部分には border-radius: 50% という値を付けていますね こうすることによって四隅の角が 丸められるというアニメーションが発動します 結果 このような形になるわけですね 最後にトランジション D を見てみます こちらは box-shadow を 指定していますね そして 0x 0px 2px 3px そして 影の色を― purple としています この 2px はぼかしの範囲 そして この 3px は影の範囲となっています このようにセットすることで最終的には こういった形の動作をする形になります このように CSS3 では アニメーションの作成を行う事とも出来ます 今まで ジャバスクリプト等といった プログラミング言語を使わないと― 実装できなかったものが CSS だけで 実装できるようになっている― というのは大変便利ですね 以上でレッスンは終了です 今回は滑らかな要素の動き いわゆる トランジションを CSS3 で― 実装する方法について解説致しました 以降のレッスンでは transform という CSS プロパーティーを使って― 要素を変形アニメーションさせる 方法について解説していきますので― そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

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

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

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

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