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

新たなテキストに異なるスタイルを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
新たに加えるテキストには、少し異なるスタイルを設定します。
講師:
07:29

字幕

このレッスンでは イルミネーションが光るような テキストのアニメーションに対して もう1行、 別のCSSの設定のテキストを加えます。 この3行目がそうなんですが まず、文字が赤で光っているように見えます。 もっとも、真ん中だけは もう電気が切れかけたような感じがします。 あともう一つ、ポインターを重ねると この光っている方の文字については 明かりが少し、広がるような感じになります。 このようなテキストを追加します。 まだテキストが2行だけの HTMLドキュメントを Dreamweaverで開きました。 この2行はP要素のクラスの名前「main」 それから基本的な構造が 一緒であることからわかるように CSSは基本的に同じものを使っています。 ですから、 同じような効果になっているわけですが 確認しましょう。 ファイルメニューから、 ブラウザーでプレビューです。 テキスト2行、 もちろん文字は違いますけれども 同じような光る効果 マウスポイントを合わせると ボヤっと明かりが広がります。 あと1文字ずつ アニメーションする文字があって このアニメーションも 同じものを使っていますので 完全に点滅が同期しています。 ここに異なる設定の もう1行テキストを加えたいと思います。 3行目の文字だけ、 先に入力してしまいましょう。 仮に設定を同じものを使ってしまいます。 あとでCSSを別に定めます。 ですから、コピーをして ペーストして P要素クラス、同じままですけれども 文字だけ変えておきます。 「.com」としました。 では一応、 この段階でも確認しておきましょう。 保存して、ブラウザーでプレビューします。 同じ設定で3行目の文字が加わりました。 アニメーションについては、 特に設定していませんので 文字が点滅したりはしません。 ただポインターを合わせると、 ボヤッと広がるとか 基本的な設定は前の2行と同じです。 では、この3行目のCSSを 変えて定義していきます。 3行目のP要素には クラスでなく、ID属性を定めてしまいます。 IDは「sub」としましょう。 それで、そのsubのCSSを設定します。 subとして シャドウと それからテキストのカラーを設定します。 設定の仕方は、上の2行と同じなので ここを使わせてもらいましょう。 これが上の2行の基本的な設定です。 コピーしまして subの方にペーストします。 構造は一緒なんですが、まず文字は赤です。 ですから、「red」と。 影も、影というか 明かりですね。広がる明かりは 基本語ですから「red」になるわけです。 少し明るめのredということで ここでは「firebrick」を使います。 そして、引き締めるための色なんですが ここでは暗めの赤ということで 「darkred」と。 構造は一緒ですけれども 基本的にカラーが 変わったということになりますね。 では、ここで確認しましょう。 ファイルを保存して ブラウザーでプレビューします。 赤を基調とした文字が加わりました。 赤い文字になりました。 ただ、マウスポインターを合わせたときの このボヤっと広がる感じが、 まだありませんので そのあたりを次に加えていきましょう。 マウスポインターを重ねたときの設定は :hover 擬似クラスで加えます。 基本的には、 ここの設定を使わせてもらいましょう。 コピーして ペーストします。 カラーは変えませんので 文字のカラーは変えませんので 影だけですね。 そして、影の色は変えずに ボヤっと広げるだけですから ボケ幅を変えていきます。 ボケ幅は80から120に。 そして、30から80に変えます。 この引き締め度法は わずかの部分ですので 特に変えずに、このままにしておきます。 そして、:hover 擬似クラスを 加えないといけませんね。 subのあとに 擬似クラス「:hover」です。 これで、ファイルを一旦保存して また確認します。 ブラウザーでプレビューです。 マウスポインターを重ねると 光がちょっとボワっと 薄くなって広がりますね。 あとは、この真ん中の 「o」のところですけれども これを電気が切れた感じにします。 ではまた Dreamweaverに戻りましょう。 3行目の文字の真ん中の「o」の設定は 上の2行のテキストと同じように span要素に入れて定めることにします。 spanで閉じます。 そして、先ほどのhoverの 設定の後に加えます。 やはり、IDはsubですので subで spanですね。 設定としては、まず不透明度を下げます。 opacityを「0.4」にします。 それから、あとは影ですね。 テキストの影、テキストシャドウです。 これを無しにしますので、 「none」としましょう。 また、確認します。 ファイルを保存して ブラウザーでプレビューしましょう。 文字「o」が、 電気が切れた感じになりましたね。 こちらは影がありません。 他の両方の 両端の文字については ポインターを重ねると、 光が広がるようになりました。 基本的な動きとしては 上の2行と似ているんですけれども カラーを変えた、ということです。 このレッスンでは イルミネーションが光るような テキストの設定に対して 新たな3行目を加えました。 この3行目は、 P要素にID属性としてsubを定め subに対するCSS設定を行っています。 基本的には、赤い文字にして 影を赤系統で統一しました。 そしてマウスポインターを重ねた時に、 影が広がると。 もう一つ、1文字だけ span要素に入れて その不透明度を下げ、 影をなくしたということです。

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

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

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

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

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

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