このチャプターで何をつくるのか

字幕

このレッスンではチャプター全体を通して どのようなものを作り何を学習するのか ということを簡単にご説明します まず作るのは今画面でお見せしている テキストのアニメーションです アニメーションが時間差で動いていますね まず文字が浮き上がっているように見えます これは影を工夫して このような文字の浮き上がりを作っています それからフェイドイン　フェイドアウトと 言われるような効果ですけれども animation というプロパティを使って 設定してみます それからアニメーションに 時間差がついています こうしたことについても学ぶ予定です では簡単に HTML ドキュメントの中身を 覗き見しておきましょう Dreamweaver で HTML ドキュメントを開いています アニメーションの設定というのは この animation プロパティです それから文字を浮き上がらせるには text-shadow というプロパティで 影をうまく工夫しています それから時間差で アニメーションするというのは このあたりの設定になります 細かいことは個々のレッスンで ご説明していきます それからもう一つ 使っていたフォントがちょっと 柔らかい感じのフォントだったと思うのですが あれはグーグルフォントの ウェブフォントを使っています この フォントの取り込み方についても ご説明する予定です このレッスンではチャプターの 内容をご紹介しました まず作るのは文字のフェイドイン フェイドアウトのアニメーションです 学習する項目としては ウェブフォントを使う それから影で 文字を浮き上がらせる そのテクニック そしてメインになりますけれども フェイドイン　フェイドアウトの アニメーションをどのように設定するのか それからアニメーションに 時間差をつけるという ちょっとしたテクニックについても 紹介いたします