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

要素を加えて影をつける

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
疑似要素を加えて、ドロップシャドウの効果を与えます。
講師:
05:30

字幕

このレッスンでは CSSで要素を加えて その要素に 飾り付けをしてみます 具体的にこの画面の フォトギャラリーでは どこにその要素が 使われているかといいますと 写真の周りにはうっすらと 影がついています けれども下端の方の影が 少し濃いですね 実は 透明の要素を 下端に加えてあって そこに 濃い目の陰が つけてあるんです 要素を加えるための CSSの構文を 先に確認しておきましょう 今 MDNのCSSリファレンスを 開いています そして使うのは この beforeという 擬似要素です このbeforeは マッチする要素の 最初に 子要素を加えます CSSで要素を加えてしまうので 擬似要素というふうに呼ばれます 構文はというと element 要素 のあとに コロンを2つつけて before もうひとつ コロンが1個のNbeforeが あるんですけれども コロンが1個の方は CSS2の構文になります ですから CSS3の方では コロンを2つつける という形になります このコロンを 2つつけるのは 擬似クラスと 間違えやすいので 擬似クラスとは違います  擬似要素です という見分けを はっきりさせるために CSS綴りで 導入されました また子要素を加える前の HTMLドキュメントを Dreamweaverで 開きました body要素を 確認してみます img要素 写真ですね それをid galleryという div要素で囲んでいます この状態で 今現在どうなっているか というのを 確認しましょう ファイルメニューの [ブラウザーでプレビュー]です Google Chromeで 開きます まだ今現在は 影がついていますけれども 下の端の影と 他の3つの隅の影 がまったく同じですね 子要素をこの下端に 加えてみたいと思います Dreamweaverに 戻りましょう まずは before擬似要素を 加えて 確認することにしましょう ではこのgalleryの セレクタの下に galleryの要素の 最初の子要素 beforeを入れます そしてcontentというのを 定めなければいけません 中身ですね でも今回 中身 空っぽですので 「”」2つで空 というふうにします 次にpositionです これはabsouteで いきましょう そして幅を定めなければ いけません galleryと同じ幅 100%と そして高さですね 高さは 20ピクセルにしましょう 後は確認のために backgroundのカラーを わかりやすく レッドにしておきます そして場所は bottom でちゃんと見えるように ー20とします 高さ分下に下げます ではファイルを保存して ブラウザで確認しましょう 別名ではないですね ファイルを保存して ブラウザで確認します 赤い擬似要素が 写真の下に bottom 20ピクセル 下に出ています 擬似要素が加わったということが わかりましたので 改めて影に つけなおしたいと思います backgroundの カラーをやめましょう これをやめまして 目的のbox-shadowに つけ替えます shadowはまず x方向のズレは0 そして垂直方向には 8ピクセル ぼかしの幅は 16ピクセルとします そしてRGBカラーですね rgbaとします 影ですから黒 RGBはゼロです そして元の影は アルファが 0.2になってますので もうちょっと濃い目に 0.5とします それからbottomを ずらしましたけれども これを0ピクセルとして 下端と合わせましょう では改めて ファイルを保存して ブラウザーで プレビューします これで下端に 濃い影がついたということです このレッスンでは before擬似要素を使って 空っぽの要素を加え そこに影を飾り付けました before擬似要素 というのは 要素の初めに 子要素を加えます 構文としては 要素の後に ダブルコロンbefore そしてナミカッコの中に 通常のスタイルです これがCSS3の場合の 構文ですが もしCSS2を 使う場合には 要素の後に コロンが1つだけ というスタイルになります

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

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

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

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

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

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