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

写真とボタンを構成するHTML

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォトギャラリーのおおもととなるレイアウトのHTMLとCSSの構成を確認します。
講師:
04:37

字幕

このレッスンではフォトギャラリーの 大本となるレイアウトについて html ドキュメントの中身が どうなっているのかを確認します 今ブラウザで開いている状態ですけれども ここが写真の領域です 白くなっています 背景はグレーです そして下に5つ四角があるのは ボタンになる予定です まだこれだけしか配置しておらず ほとんど飾り付けがありません この html ドキュメントが どうなっているのか Dreamweaver で見てみましょう これが html ドキュメントです body 要素の方から確認しましょう body 要素には写真を入れる予定は あるのですが まだ入っていません あるのは div で全体を囲って あるわけですけれども その div には id として gallery が設定されています この gallery の中に 画像とボタンが入る予定です けれども今はボタンしかありません ボタンは ul 要素の中の li 要素で設けています そしてクリックで操作ができるように a 要素が中に含まれています そして href にとりあえず入れた # が書いてあるだけです まだこれはあたりというか これから後で 変更するということになっています 次に CSS について確かめていきます まず body のセッティング padding margin background は 少しグレーがかっていましたね lightgrey です それから gallery というのが これがゆくゆく写真が入る領域 ということになっていて 大きさが定められていて マージンや位置それから 写真が入る部分は背景が白でした そして ul の中にボタンにすべき 項目が入っているわけです そのボタンが入る領域の やはり位置的な設定と それからボタンとして使うわけですので リストとしての飾り付けはなしにします ちょっと気になるのは -60 という この bottom の設定でしょう bottom ということですから gallery の領域の下端を基準にします 試しにこれを 0 にしてみましょう ファイルを保存してブラウザで確認します ブラウザでプレビューです Google Chrome で開きましょう 0 にすると下端を基準にして そこの上にボタンが並んでしまいました この領域の下にボタンを もっていきたいということで -(マイナス)を使っていたんです Dreamweaver にもう一度戻ります このボタンの領域の高さは 40px です ですから 40 に少し余裕をみて 下の方にもっていくので -60 という数字を設定したわけです これでもう一度確認してみましょう ファイルを保存して ブラウザでプレビューします 元のとおり この下端から さらに下に配置されるようになりました もう一度 では Dreamweaver に戻ります ボタン5つをまとめているのは ul 要素です その中の個々のボタンは ul の中の li ということになります そして設定は margin とか それから float が left になっています また li 要素の中には a 要素があって これがクリックするボタンの働きを ゆくゆくはするわけですけれども その大きさが設定されています あのグレーの四角の大きさですね そして display は block で 少し暗いグレーになっていました background が silver ということです このレッスンではフォトギャラリーの 大本となるデザイン レイアウトについて その html の内容を CSS も含めて確認しました gallery という div 要素の 領域が この白い領域です ここにゆくゆくは写真が入るということです それからボタンは ul 要素の中に li 要素で配置されているんですけれども そして要素としては div 要素の中にあるんですが 位置を動かして gallery の領域の 下に持ってきています そしてこの5つのリストなんですけれども その要素の四角がゆくゆくは ボタンになるという そういう想定です

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

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

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

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

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

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