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

このチャプターで何をつくるのか

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このチャプターでつくるコンテンツと学習項目を始めに確認します。
講師:
01:59

字幕

このレッスンではこのチャプター全体を通して 何を作って何を学ぶのかと いうことを簡単に確認します 作るのはこのプッシュボタンです 少し出っ張っているようになっていますし 右下に影ついています といっても この HTML ドキュメントの中身 自体はとても簡単です P 要素の中に A 要素が入っているだけです ちょっとドキュメントを見てみましょう ドキュメントは Adobe Dreamweaver CC で開いています ボディー要素の中身を見ると まず div 要素があり その中にp要素があって そして a 要素がある そして「プッシュボタン」と書いてあるだけですね つまり こんな簡単な要素に対して 上に CSS がずらっと書いてありますけれども CSS だけで あのようなボタンを表現しています もう一回ボタンの方を確認してみます ボタンはただ 出っ張って影ついていると いうだけではありません ロールオーバーすると色が変わります しかもちょっと動いていますね 影の状態も変わっています さらにクリックするとまた違う状態に つまりアニメーションをしていると いうことですね ですからアニメーションについても学びます このボタンの出っ張りとか影のつけ方の工夫 それからその他必要な 技術的な知識についても若干 補うことになります このレッスンでは チャプター全体を通して何を学ぶのか いうことをご説明しました 作るのはアニメーションをするボタンです そしてロールオーバーとクリックで 状態が変わりました 影の使い方を工夫することで 出っ張ったりあるいはシャドウを 下に落としたりといゆうことができます そしてアニメーションの設定 さらに必要な技術的な知識についても補います

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

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

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

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

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

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