CSS3によるタイポグラフィ

トランジションを与える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
transitionプロパティを使うと、要素のプロパティの値がアニメーションで変えられます。
講師:
07:54

字幕

このレッスンでは要素にマウスポインタを 合わせた時のプロパティの変化を アニメーションで表現してみます いまブラウザで開いているHTMLドキュメントは テキストがボケボケにボカシてあります そしてマウスポインタを合わせると はっきりとしたテキストがでてくるんですけど それが急にパッと変わるのでなく徐々に 浮かび出てくるという感じになっています 拡大 縮小もしているんですけど 徐々に拡大してくるので 煙の中にポインタを合わせると煙が取り払われて 文字が浮かび上がってくるという 面白い表現になっています このようなアニメーションの 設定についてご説明します DreamweaverCC で開いた この HTML ドキュメントは まだアニメーションの設定はされていません けれどもこの文字 "p" 要素で "class" が "focus" なんですけど この "p" 要素は lettering.js で "jquery" の java script コードによって lettering というメソッドで一文字ずつ span 要素に切り分けられています その span 要素に対してマウスポインタが 重なったら hover{} クラスですね そこで設定を変えています マウスポインタがまだ重なっていないとき 表示の状態の時には テキストのカラーが α0 ということで 透明になっていて 但しテキストシャドウがついています マウスポインタを重ねるとアルファが1になって テキストがはっきり見えるようになり その代わりシャドウが none になって消える あと transform プロパティで scale 関数を 使って文字サイズを拡大しています では現在の設定の状態をファイルメニューの ブラウザでプレビューで確認しましょう まずはボケボケのテキストが テキストシャドウが表示されています ポインタを合わせると大きい くっきりした文字に直ちに変わります この変化をアニメーションで表現しよう という場合には transition というプロパティを使います アニメーションは span 要素に適用しますので span 要素のセレクターです ここに transition のプロパティを加えます transition ということで 最低限指定するのは時間です 1s ということで 1秒かけてアニメーションするということです ファイルを保存して ブラウザで確かめてみましょう ブラウザでプレビューです サイズの状態は勿論一緒です マウスポインタを重ねると1秒で 拡大しながらくっきりした文字が現れ 逆に影は消えていくということになっています transition のプロパティについて もう1つ値をご紹介します transition プロパティに設定できる 値というのはたくさんあります 今回は時間をまず設定しましたけど あともう1つだけご紹介します 何も設定しなければデフォルト値が 割り当てられますので 特に心配しなくていいんですが デフォルト値から変えたい場合に 値を定めます 今回はタイミング関数というものを定めてみます 値はすべてスペース区切りで タイミング関数のうち今回は ease-out というのを選んでみます このタイミング関数というのは 値の変わり方を定めるというものです では結果を見てみましょう 一回ファイルを保存して ブラウザでプレビューです マウスポインタを重ねてみます 段々拡大しつつクッキリとした文字が現れ 影は消えていく 先ほどと何も変わらないように見えますね タイミング関数はこの変化の仕方を コントロールしているのですが 位置が変わるような変化の場合は わかりやすいのですが 今回のようにアルファが変わったり シャドウが消えていくというものでは ちょっと目で見て感じることはできません そこで MDN の CSS リファレンスを見て グラフで確認してみましょう MDN:Mozilla Developer Network の略です CSS リファレンスは MDN の CSS で 簡単に探すことができます CSS MDN Mozilla Developer Network ということでググりましょう グラフなんですが ここで検索するのが早いです タイミング関数という言い方をするのですが 検索する時は英語で timing function と入力すると 簡単に見つかります プロパティ名が timing function と言うのですね これを見てみましょう 細かい説明がたくさん書いてあるのですが 見たいのは一般的なタイミング関数のキーワード 先ほどは "ease out" とか入れましたけど あのことです "ease out" を含めて7つのキーワードがあって このキーワードで簡単に 7つの変化を選ぶことができます グラフがここに1個ずつでているんですけれど 小さくて見づらいですね そこでタブで開いておきました 7つ順番にいきます linear linear は直線のことです 直線的に時間とともに値が変化する これは時間と値の変化の仕方のグラフです 次に "ease" これがデフォルトなんですが 段々加速して 段々減速するというパターンです 比較的無難に使えるのでデフォルトになっています 次が "ease-in" 初めに加速するというパターンです そして次が "ease-in-out" in は始まり out は終わりを意味するので 始まりに加速して終わりに減速する さっきの ease に似てます グラフのカーブが少し違います ease-in-out のほうが メリハリが効いた感じになっています 今回選んだのは "ease-out" ですから 終わりの方で減速する この微妙なカーブですから 先ほどのような設定の場合は ちょっと目で見て感じることはできません あとの2つはちょっと変わった変化なんですけど 最初にいきなり変わってそのまま 今度は逆にずっと一定の値で最後にポンと変わる という変化をしています そして今回はこの "ease-out" を使いました このレッスンでは要素にマウスポインタを重ねた時の プロパティの変化をアニメーションで表現する transition というプロパティについて ご説明しました 今回使ったのは2つの値で 初めの値が変化するアニメーションの時間です 2つ目がタイミング関数ということで ちょっとわかりにくかったので グラフでご紹介しました

CSS3によるタイポグラフィ

このコースではCSSの基礎を理解された方を対象に、CSSを用いたさまざまな文字の魅力的な見せ方を紹介していきます。ひと文字単位で細かく文字をデザインしてゆく方法や、影やグラデーション、変形などを文字に設定する方法、またテキストを使ったアニメーションや便利なJavaScriptツール、Webフォントの使い方などについても解説します。

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

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

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

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