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

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このチャプターでつくるコンテンツと学習項目を始めに確認します。
講師:
02:20

字幕

このレッスンではチャプター全体を通して どのようなものを作り どういった項目を学習するのかと いうことを簡単にご紹介します 作るのはこの画面に現れている アコーディオンメニューです 「アコーディオン」という 名称の通り滑らかに サブメニューが開いたり閉じたりします ですからこの滑らかな動き について学習します この動き方というのは 幾つか設定がありますのでその選択 関数を選択するんですが そういったものもご紹介します また このメインメニューの項目 実は 薄いグレーから濃いグレーの グラデーションになっています このグラデーションも 学習する項目の一つです それからクリックしたものを 選択してそのサブメニューを開く いうときに擬似クラスを使います クリックをした時 この URL に ターゲットが表示されるんですけれども このターゲットを判別して そのセレクターを使って そのサブメニュー この選択された 項目のサブメニューを開くと いったことを行っています そうした擬似クラス あるいはセレクターについてもご説明します あとは角を丸くしたり 影をつけたり間に線を 入れたりといった細かな ビジュアル的な設定もご説明します このレッスンでは チャプターを通して何を学ぶのかと いうことをご紹介しました 作るのは滑らかにサブメニューが 開いて閉じるアコーデョンメニューです そしてこれを作るために グラデーションのカラーの設定 タイトル メインメニューの部分に ある色からもう一つの色へ 変わるグラデーションを設定しています この設定の仕方をご紹介します また アニメーションの滑らかな動き この変化の仕方というのが タイミング関数というもので設定されます そのご説明もします そしてクリックされたものを選ぶために 擬似クラスやセレクターを新たにご紹介します そして 細かな設定ですけれども 角丸 影 ボーダーの線 いったものもご紹介する予定です

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

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

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

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

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

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