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

要素にドロップシャドウを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素に影を加えるには、box-shadowプロパティを使います。その構文と設定例をご説明します。
講師:
07:30

字幕

このレッスンでは要素への 影のつけ方についてご紹介します 今画面にあるこのプッシュボタン 右下にうっすらと影が伸びています それだけでなく マウスポインターをボタンに合わせると 影が縮んで黒くなります さらにマウスをクリックすると 影がさらに縮むと このような マウスインタラクションに合わせて 影が状態を変える というところまでご説明したいと思います Dreamweaver では まだボタンに影をつける前の HTMLドキュメントを開いています p 要素クラス属性は btn の中にa要素で ボタンに表示するテキストが含まれます では影が付いていない状態を確認しましょう ファイルのメニューから ブラウザでプレビューで グーグルクロームで見てみます 影が付いていませんね ただし マウスポインターを合わせると カラーが変わります クリックしても暗い色にカラーが変わる このインタラクションだけはまだ付いています この CSS にさらに影を付け加えて アニメーションさせようということです p 要素クラス属性の btn という中に置いた a 要素これに対し影を付けるわけですから セレクタはクラス btn の a 要素 ということになります ここにドロップシャドウを付ける プロパティを加えます プロパティはボ box-shadow です どのような設定をするのか それを先に確認しておきましょう box-shadow プロパティの設定 構文というのは box-shafow に x 距離 y距離 これはシャドウ 影というのは実物よりも 少し水平垂直にずれていますね そのズレた距離のことを x 距離 y 距離という形で二つ指定します そのあとはぼかし幅 影はぼけますのでどれくらいぼけるのか 数字が大きいほどぼやっとしてきます それから影の色 これは今回は rgba で 定めることにします この他にも box-shadow プロパティに 設定できる値というのはあますけれども そういったものは 省略をすることができます それでは box-shadow に 値を設定しましょう xy 方向の距離は4ピクセルとします それぞれ4ピクセルです ぼけ幅は少し大きくして8ピクセル それからカラーはrgbカラーですね rgba です a がつきます 黒ですので rgb はゼロのまま a は少し助けた感じで 0.6 としたいと思います では一旦保存します そしてブラウザで確認しましょう ブラウザでプレビューでグーグルクロームです ボタンの右下にうっすらと影がつきました もちろんマウスポインタを重ねても クリックしてもそれぞれの設定を box-shadow の設定をしていませんので 影は変わりません それぞれについてシャドウ box-shadow の設定を変えて 与えるようにしましょう マウスポインタを重ねた時というのは hover 擬似クラスで設定をします クラスが btn a要素の hover 擬似クラス ここに box-shadow の設定を 追加しましょう やはり box-shadow です そして設定の値は半分にしてしまいます xy は半分にピクセル ぼけ幅も同じく半分です そして color rgbaですけれども color はやはり黒 その代わり a を少し強めます ちょっと黒みが増すということですね では一旦保存しましょうファイルを保存したら 改めてファイルメニューの ブラウザープレビューで グーグルクロームを確認しましょう 先ほどと同じようにボタンに影が付いています でも今度はマウスポインタを重ねると 影が縮んで黒みが増すという風になりました では今度はクリックした場合ですね 今クリックした場合は ロールオーバーした時と 変わりませんけれども クリックした時もさらに box-shadow を変えてみたいと思います マウスクリックした時の擬似クラスは active です ですからクラスbtn a 要素の active の擬似クラスの中に クリックした場合の 影のbox-shadow の設定を入れます box-shadow 設定はさらに縮めますので xy 1ピクセル それからぼけ幅も 1ピクセルにしてしまいましょう そしてrgbaです カラーは相変わらず黒 そして a は普通の状態の 0,6に戻すことにします これで保存しましょう そしてブラウザで確認しますので ブラウザでプレビューのグーグルクロームです さてうっすらと影が付いている ボタンにポイントを合わせると影が縮みます そして少し黒みが増します そこでクリックをするともっと縮んでしまうと ほとんど影ついていないように見えますので 年のため確認しましょうか 表示を拡大します。ショートカットは Macの場合には command +None ウィンドウズでは ctrl +です ここはもう ショートカットで拡大してしまいます 500% に拡大しました これでよくわかるでしょう まず普通の状態です マウスポイントを重ねます 影が縮んで黒くなりました そしてボタンを押します 普通の状態では ほとんど見えませんでしたけれども 一応まだちょっと影が残っているのことは お分かりいただけますね では表示をもとに戻します このレッスンで学んだのは box-shadow プロパティで 要素に影を付けるそのつけ方でした もう一度シンタックス 構文を確認してみましょう box-shadow プロパティの構文 シンタックスはこのようなものでした box-shadow に xy 方向の距離 影のズレですねそれからぼかし幅 そして影の色 この4つを今回は指定しました 要素に対するマウスの ロールオーバーとかクリックで カラーを変えるだけでも ボタンとしての動作ははたすわけですけれども このように影が実際に一緒に動いていくと 表現力が増すと思います 是非アイディアを使って試してみてください

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

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

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

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

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

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