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

HTMLとCSSの基本的な構成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アニメーションを設定する前のHTMLとCSSの基本的な構成を初めに確認しておきます。
講師:
04:16

字幕

このレッスンでは まだアニメーションが設定されていない HTMLドキュメントの中の HTMLとCSSの構成を簡単に確認します 今画面に出ているのが ブラウザーで見た状態なんですけども 画像が1つそしてテキストがあって カードの様な形になっています これにアニメーションを後々つけると共に ゆくゆくはこのカードの数を複数置きます そうした事を想定した構成になっていますので その事を頭において確認してみましょう こちらがDreamWeaverで開いた HTMLドキュメントです まず要素の方から 確認しておきます 要素には 画像とそれからテキストがあって 要素の中に置かれています そしてゆくゆくはこのカードが 複数になった時の為なんですけども それをまとめるタグがあります 本をまとめるのでbookshelf という名前のクラスが設定されています 今のところは本は一つなんですけども その要素にはbookというクラスと img0, まぁイメージの意味なんですけど img0という 二つのクラスが設定してあります これは後々複数の画像 複数の本のカードを作った場合に その複数の物に共通の設定を bookというクラスで指定して 個々に変えたい指定をimg 0から始まる通し番号で指定しようと そういう思惑になっています クラスがbookshelfと bookとimg 今のところは0だけですけども 3つあるという事を頭に入れた上で cssの方も確認しましょう まずについてはフォントの設定と それからバックグランドカラー 背景色が設定されています 次に複数のカードが 後々入る想定なんですけども それをまとめるbookshelfです こちらは位置とか大きさとか 余白といった設定がされています そしてbookshelfの中にbook テキストと画像が合わさった物ですね が配置されますのでそのポジションです それからbook これがここのカードの設定になる訳ですけども テキストのデコレーション なし そしてカラーが設定され 余白等の設定です それともう一つ バックグランドカラーもついています ホワイトです さらにスクロールして bookの中の画像 イメージの設定を見てみましょう まずimgについてはマージン それから高さが設定してあって ボーダーがつきます そしてimg0ですね bookshelfの中のimg0 これは個別に設定する内容なんですけども 幅が指定されています これをもう一度 ブラウザーで確認してみましょう 今の構成を頭に入れた上で どうなっているか見てみてください "ファイル" メニューから "ブラウザーでプレビュー" です "Google Chrome" で確認しましょう 背景が薄いグレーになっています そしてブックのカードは 背景が白で枠線が付いていますね それからイメージにも枠線があり 合わせてテキストがあると こういう形で表示されています このレッスンでは まだアニメーションをつける前の 基本的なHTMLの構成について 確認をしました 画像とテキストが入ったこのタグ 要素の中にはbookと img0という二つのクラスが設定されていて 全体に共通のものと個別のものが 後々指定出来る様になっています そして複数の本のカードを 入れた場合の想定として 全体をくくる bookshelfというクラスも 定義されていました

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

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

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

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

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

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