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

ベースとなるHTMLドキュメントの構成とレイアウト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
チャプターをとおして作業するベースとなるHTMLドキュメントの構成とレイアウトを確認します。
講師:
06:35

字幕

このレッスンではチャプターを通じて 作業するベースとなる html ドキュメントの構成と レイアウトについて確認をします 画面に出ているのがブラウザーで見た そのベースのレイアウトです 画像が3つあり それぞれについての 説明のテキストが やはり3つあります 静的な状態ですので まだインタラクションはありませんし 特別な効果も与えられていません html ドキュメントを Dreamweaver で開きました body 要素の方をみてみましょう リンクやそれからテキスト あるいは画像の操作などがありまして ちょっと見にくい状態ですね ですので これらの余分なものを 取り去った構造を見るためだけの template.html という ドキュメントを用意しましたので こちらで確認しましょう 構成は全く同じなんですけれども body 要素の方が 必要最小限の 説明だけになっています 画像のソースはありませんし それからテキストの方も 極最小限に なっていますので 分かりやすいかと思います body 要素の中は まず div 要素で占められています div 要素の id が wrapper で全体を占めていますね そして その中に実質的な レイアウトを作っているのが ul 要素 books という id になっています これが画像3つとテキスト3つのセットを 包んでいるわけです それぞれの画像とテキストの説明のセットは li 要素になっています その中にイメージ img タグ img 要素があり それからテキストの説明は また div 要素でくくられています class が bookinfo と いうふうになっていて タイトルと説明があり それからさらに詳しい情報に リンクするための a 要素があります これが1セットということで 画像とテキストは3つありましたね ですので あと2つ 同じような構造になっています 説明やリンクなどは 全てとってしまいましたので これだけを実際にブラウザーで見ると ちょっと貧素なんですが 一応確認してみましょう ファイルメニューから ブラウザーでプレビューします 最初に見た画面と比べると 随分省略されていますね 画像が3つ小さくなっていますが ここに入る予定です あるいは既にベースにしてある方には 画像が入っています これはテンプレート 構造を説明するためのドキュメントですので これは作業には使いません あくまでこの説明用です そしてテキストの部分の領域は ちゃんととられていて タイトルと説明があり あと a 要素ですね 詳しい説明にいく More info というリンクなんですが ここは レイアウトだけがされているので ボタンのように見えています ではこの CSS を確認しますので 改めて Dreamweaver の方に 戻りましょう CSS についてはこのテンプレートの方も ベースとなるドキュメントと 全く同じ CSS の設定がされています body 要素の方 もう一度確認だけしておきますけれども 一番全体を包んでいる div 要素は id が wrapper です それから3つのセットを包んでいる ul 要素 id が books です そしてその中に li 要素で 画像と文字のテキストのセットが 一つずつ含まれているんですれども テキストの説明の部分ですね タイトルと説明と あとリンクがありますけれども そこは div 要素で class が bookinfo というふうになっています これを確認した上で CSS の方を見てみましょう 上にスクロールします まず全体の余白であるとか テキストや背景の設定があります それから全体を包んでいる wrapper についての 幅や余白ですね それから ul 要素 books の margin その中の個々の画像と それからテキストのセット 持っている部分についての設定 そして画像の位置の設定といったものが あげられています class の bookinfo という のは テキストの説明部分でしたね それについての背景であるとか 基本的な余白等の設定があります それからこのタイトルの文字 そして色とか基本的な設定があって 一つ確認しておきたいのはここですね a 要素 つまりボタンのように なっていたリンクの部分です この設定がされています その中でも border-radius 角丸です 角を丸くしてありますので そして背景で 背景色で塗ってあるということで ボタンのように見せているということです この構成の確認用のテンプレートの html ドキュメントというのは body 要素の中の URL とかテキストなどの 見にくい 確認がしづらい要素を 除いただけです CSS についてはベースとなる semplate.html と同じですので あたらめてこちらに切り替えて もう一度ブラウザーで確認してみましょう ブラウザーでプレビューします 実際に画像を当てはめて テキストを当てはめると このようなレイアウトになるわけです 画像がちゃんと入りました それからタイトルやテキストが加わって 角丸の設定された領域に a 要素が入っていますので ボタンのようになっています リンクは設定されていますけれども インタラクションはありません このレッスンではチャプターを通じて作業する そのベースとなる html ドキュメントの 構成とレイアウトを確認しました まだ効果や設定がされる前の インタラクションのない静的なレイアウトと その構成を確認しました

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

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

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

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

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

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