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

画像とテキストに影を加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像とテキストの領域に影を加え、マウスポインタを重ねたときに変化させます。
講師:
05:24

字幕

このレッスンでは 画像とテキストを配置した まだ静的なレイアウトの HTMLドキュメントについて 画像の領域と それからテキストの領域に それぞれ影をつけます 画像の方の影は ちょっと控え目です テキストの方が ぼやっと 広がってるんですが もうひとつ テキストの方は マウスポインタを重ねたとき 影が縮むという インタラクションを加えています これらのシャドウを これから加えましょう まだシャドウが加えられていない HTMLドキュメントを Dreamweaverで 開きました そして body要素なんですが 画像とテキストの 3セットが ul要素の中に リストとして 含まれています ul要素はid=books  が設定されています そして個々の画像と テキストのセットは li要素の中にあります そしてimg要素に 画像があり テキストは タイトル 説明 といったものが div要素の中に 含まれています div要素には クラス bookinfo という 設定がされています では まだ影が ついていないんですけれども 現在の状況を 確認しましょう [ファイル]で [ブラウザーでプレビュー] します まだ 影がついていません もちろん 重ねても 何も起こりません 影がついていませんから この仕切りのところ 間のところが くっついて見えますね 影をつければ この仕切りもはっきりします では Dreamweaverの方に 戻りましょう 画像とテキストの セットは id booksの ul要素の中にありました その中に li要素として 画像とテキストの セットがあり そのイメージ要素に対して 影をつけたいので このセレクタの中に 影の設定を 加えます プロパティは box-shadowです そしてまず x方向とy方向の ズレなんですけれども x方向は ゼロとします y方向は 3ピクセル 次に ボケ幅です ボケ幅は 画像の方は 少し少な目に 10ピクセル としておきます カラーは グレーです #888 としましょう これでファイルを保存して 確認をします [ブラウザでプレビュー] です 画像の方に うっすらと 控え目な影がつきました そして この 間の仕切りですね これが 影がついたので はっきりした ということで 確認ができます では 今度は テキストの領域の方です Dreamweaverに 戻りましょう テキストの領域は クラスとして bookinfoが 定められていました ですからここに 影を加えます やはり box-shadowですね 少し 影は 大き目にするんですが x方向のずれは ありません y方向には 20ピクセル ちょっと大目に ずらします そして ボケ幅も大きく 40ピクセル カラーは 同じくグレーです これで保存して 確認します [ブラウザーでプレビュー] テキストの領域の方は 少し広めの影がつきました まだ マウスポインタを 重ねても 何も起こりませんので これを付け加えます Dreamweaverに 戻りましょう マウスポインタが 重なったら というのは ホバー擬似クラスですね ですから セレクタを加えます id booksの中の 画像とテキストのセットは li要素でした そこに ポインタが重なったら hoverですね その時 その中の テキスト領域は クラスとして bookinfoが 定められていましたので bookinfo それに対して 影をつけるということになります 影は同じく box-shadowですね そしてx方向のズレはなし y方向には 縮めますので 5ピクセルと縮め さらにボケ幅も 縮めます 10ピクセルとしましょう カラーは同じです グレーということで 設定をして ファイルを保存して 確認しましょう [ブラウザでプレビュー] します さて マウスポインタを テキストの領域に重ねると 影が縮みます でもホバー擬似クラスを 設定したのは リストの方ですよね li要素の方です ですから 画像に ポインタを重ねても テキストの領域の影は 縮むということです このレッスンでは 画像のimg要素 それからテキストの 領域を定めている bookinfoのクラス その領域 それぞれについて box-shadowプロパティで 影をつけました それから このテキストの 領域については li要素 画像とテキストの セットのどちらかに マウスポインタが 重なったとき hover擬似クラス ですね に対して影を少し縮める という設定も加えました

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

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

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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