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

text-shadowプロパティで文字を浮かび上がらせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストに影を組合わせて適用することで、文字を浮かび上がらせるような表現ができます。
講師:
05:55

字幕

このレッスンではテキストを 浮き上がらせるような表現について解説します これがその例なんですけれども 影がうっすらと付いています それによって 出っ張っているように見えるんですけれども その上に乗っているこの白い テキストですね これは実は テキストの色を白にしているのではありません この白も実は影を使っています そうするとこのように浮き上がって見えると いうことなんですが 具体的なテクニックについては Dreamweaver を開いて 実際に設定しながら 学んでいくことにしましょう ステップは全部で三つあります 作業はまだ影のつけていないただのフォントが 表示されていると いうところからスタートしますが 今開いているのが そのHTMLドキュメントです ボディ要素の中には h1要素で 文字が書かれています スパン要素で挟んであることについては まだ今は気にしなくて結構です class name が h1 要素に設定されています そして今のところ フォントの普通の設定だけです フォントの位置とか使う font-family それからサイズは大きめです ライン・スペーシングの設定があります この状態で まず普通のところからスタートしますので ブラウザーで確認しましょう ファイルメニューから ブラウザーでプレビューです まだ 文字が普通に打ってあるだけと いうことですね では Dreamweaver の方に戻って 第一ステップの影をつけます まずはじめにテキストに設定するのは 普通の黒い影です ですから h1 のセレクターの中に シャドウを加えますが テキストに加えるシャドウは テキストシャドウですね そして 設定はというと まず x はずらさず 垂直方向に5ピクセルずらします そしてぼけ幅は10ピクセル 影ですから黒の影をつけますが rgba で設定します 黒い影 rgはゼロ そしてアルファをつけます 少しうっすらと0・3としましょう これで ファイルを保存して ブラウザーで確認します ブラウザーでプレビュー グーグルクロームでみましょう 黒いテキストの下にうっすらと 黒い影がつきました では次は第二ステップです また Dreamweaver に戻りましょう さて白い文字にするには テキストのカラーを 白くしてしまえばいいと思うかもしれません それでもそれに近い 浮き上がったような表現に できないこともないかもしれませんが フォントを白くしてしまうと 縁がくっきりしてしまうんですね 今回ぼやっと浮き上がったようにするためには フォントの縁をソフトにする必要があります ですから フォントのカラーは使えません 「使えません」というのは 本当に透明にしてしまうんです ということで サイズの後にカラーを「透明」で指定します 透明というのはトランスペアレントです これでテキストのカラーがなくなった 完全に透明になります ファイルメニューで保存をして ブラウザーで確認しましょう ブラウザーでプレビューです 透明になりましたので 影しか残らないということです そして今度 残る三ステップ目では この上に白い縁のソフトな テキストをのせるということになります これを影でつけるんですね ではまた Dreamweaver に戻ります テキストは白い影で表現します ということでテキストシャドウに 追加をしましょう テキスト・シャドウはカンマ区切りで 影を複数追加することができます カンマ区切りのカンマを 先に入れてしまった方が安心です そしてフォントと同じ形にしますから xy のズレはありません そして縁をソフトにするために 2ピクセルほどぼかします そして rgba で白ですから rgb は 255ということになります そして濃いめにしたいのでアルファーは 0,9 というふうにします ではこれで ファイルを保存して確認をしてみましょう ブラウザーでプレビューです これで文字が浮き上がったように見えます ポイントはまず黒い影をつける ここは簡単にわかるんですけれども 上にのせる文字です 縁をソフトにするためにフォントのカラーを 白で設定するのでなく 逆にフォントは透明にしてしまったと いうことですね そして白い影で 文字を作ったということになります ではこのレッスンのまとめを Dreamweaver に戻って確認しましょう 浮き上がったような文字は 影を組み合わせて表現しました そしてフォントそのものは 使わないのでカラーは透明 トランスペアレントにしてあります そして通常の黒い影を設定した上に 黒い影は若干ぼけ幅が大きいのですが ぼけ幅の小さい しかも不透明度の高い くっきり見える影を 白で設定したと これを組み合わせることによって ソフトな縁の白いフォントの下に 黒い影があって 浮き上がっているように見える ということでした

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

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

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

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

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

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