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

疑似要素を加えて重ね順を定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
::after疑似要素で加えた影を、他の要素の背後に置きます。
講師:
06:13

字幕

このレッスンでは 2つの擬似要素を使って 画面の写真の 両下端に 斜めの影を付け加えます こうすると 写真の両下隅が ちょっと持ち上がっているように見えると そういう表現です 今ドリームウィーバーで開いているのは 写真の左下端にだけ 斜めの影がついている HTMLドキュメントです まずは今の状況を確認しましょう ブラウザーでプレビューします 下の左端にだけ 斜めの影がついています この右端の方にも影を加えようということです では ドリームウィーバーに戻ります どのように影をつけているのかを確認しましょう ボディ要素 フォトギャラリーは 全体をdiv要素 ギャラリーでおさめています それに対してCSSを設定していて ギャラリーに対する ビフォー擬似要素 を加え 空っぽなんですけども そこに影を付け 斜めにしていると それを下に配置したと いうことです もう一つ擬似要素を追加したいと思います どういう擬似要素か CSSリファレンスで見てみましょう MDNのCSSリファレンスで開いたのは アフターという擬似要素です これは 親の子要素として 仮想的な子要素を 最後に加えると そういう擬似要素です 構文としては 要素の後に ダブルコロン アフターでスタイルを指定します ただこれは CSS3での構文で CSS2では コロンがひとつと定められていました これは擬似クラスと 擬似要素を 見分けをはっきりさせよう という目的です HTMLドキュメントに アフターの擬似要素を加えましょう 使い方はビフォーと同じなので まずはこの設定を頂いてしまいましょう ギャラリーの ダブルコロンのアフターですね これで設定はそっくりそのまま貰えるんですが もらってしまったそのままでは 同じ影になってしまいます ですから独自の設定を また新たに付け加えます 角度を変えましょう マイナス4ディグリー マイナス4度となっていますので これは逆にします トランスフォームで スキューYですね そして角度はプラスマイナス逆 4ディグリーと しましょう これで保存して ブラウザープレビューで確認してみます 傾きが逆になりましたね それから 後から加えた要素なので 前面にきてしまっています この扱いは最後にやりますので まずは位置合わせ に次に移りましょう ビフォーの擬似要素の方は レフト10ピクセルとなってますので これを逆にします レフトの反対ですからライトですね これを10ピクセルとします そしてレフトはオートとしましょう もう一度確認します ファイルを保存して ブラウザーでプレビューします 位置は良いですね ちょうど対照的に 斜めに 右下の方に影がついています 残るは この影を後ろに持っていきたい という事ですね MDNのCSSリファレンスで開いたのは ゼットインデックスというプロパティです これは要素どうしが重なったときの どっちが上になるかという 重ね順を決めます 値が大きいほど手前にかぶさります 値はどうなっているかというと デフォルト値はオートです これがもともとですね そして値を 整数で指定すると インテジャーとは整数なんですが その数字が大きいものほど 手前にくるようになります またマイナスの数値も使うことができます オートのデフォルト値 重ね順を決めたいんだから デフォルト値使ってもしょうがないと 思うかもしれませんが 重ね順をいったん決めた後 もとに戻したい時に使うことができます HTMLドキュメントに戻りましたので ゼットインデックスのプロパティを 決めましょう 左下と右下 両方とも 写真の後ろでいいわけですから ここに加えます ゼットインデックス そしてマイナスにすれば後ろに行きますので マイナス1としましょう これで確認したいと思います ファイルを保存して ブラウザーでプレビューします 写真の左下と右下に 斜めの影がついて 下の両端が少し 上に持ち上がったような表現になりました このレッスンでご紹介したのは まず アフター擬似要素です これは要素の終わりに子要素を加えます 構文としては 要素 ダブルコロン アフターで スタイルを定めます ただ CSS2の場合には コロンがひとつになります もう一つご説明したのが ゼットインデックスです これは要素の重なり順を決めます 値としては 初期値のオート または整数値です 数値が大きいほど 手前に重なります そして負の数値も使って 後ろに持っていくことができました

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

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

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

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

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

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