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

メインメニュー項目の背景色にグラデーションを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素の背景色にlinear-gradient()関数で線形のグラデーションを定めます。
講師:
07:40

字幕

このレッスンではグラデーションのカラーを 設定する方法について学びます 今開いている これはメニューなんですけれども メインメニューの項目 グレーですけれども 一番上と一番下を比べてみると 上の方が明るいですね そして真ん中はその中間の グレーになっています これはつまりグラデーションということで メインメニューの項目だけに 薄いグレーから濃いグレーの グラデーションのカラーが かかっているということです この設定の仕方について勉強しましょう まだグラデーションが加えられていない HTMLドキュメントを Dreamweaver で開いてみます ボディ要素から確認しておきましょう body 要素はメニュー全体 が ul 要素で 作られています クラスは "menu" です そしてメインメニュー項目の リスト要素 li 要素があり その中に入れ子になって サブメニューの ul 要素があります サブメニューの項目は li 要素 その中に a 要素を含んでいて そこに サブメニューの 文字テキストが含まれています では CSS の方も見てみましょう メニュー全体を包む ul 要素の メニューに対しては 背景色が 明るいグレー lightgray になっています そしてメインメニューの項目 title の中のサブメニュー ul 要素 そしてサブメニュー項目 li 要素の a 要素に対しては 背景色が white になっています ではこの状態で 今の表示を確認してみましょう ファイルメニューから ブラウザーでプレビューで グーグルクロームです メインメニューの項目 グレーが カラーが 設定されていますけれども グラデーションにはなっていません 上も下も真ん中も すべて同じライトグレーです ではここにグラデーションを設定したいので Dreamweaver に戻ります メニューを定める menu クラスの背景色 ライトグレーという単調な色を グラデーションに変えるには linear-gradient という関数を使います linear というのは線形ということですね つまり直線的なグラデーションになります そして設定するのは三つです まず方向を決めます 上から下へという具合には to bottomと 次に始まりの色です 始まりの色は 明るいグレーにしたいんですけれども whitesmoke というのを使います それから 終わりの色ですね こちらを silver にします これで一旦保存をしましょう そしてブラウザーでプレビューで確認します グーグルクロームで開きます 上の方が明るいグレー ホワイトスモーク 一番下が シルバーということで 明るいグレーから 暗いグレーへのグラデーションが 設定されました このグラデーションのつけ方について 少し構文的な確認をします MDN の CSS リファレンスで今回使った linear-gradient の関数のページを開いています linear-gradient 関数の 細かい構文上の説明 例えばグラデーションが どのような軸で変わるのかと いうことが詳しく書いてあります もっとも詳しすぎて逆に初めての人が 全容をつかむには ちょっとわかりにくい部分があります その場合には 「CSSグラデーションの利用」という 項目があります 関連情報として こちらをみると 全体を早くつかむことができると思います この「CSSグラデーションの利用」 のページの最初の項目が 今回使った 線形グラデーション linear-gradient の説明になっています スクロールしていくと 実際のサンプルが出ていますので 非常にわかりやすいかと思います まず最初は上から下へですね 今回と一緒です 上から下へ 「to bottomの設定の場合 こうなりますよ」と、 いうことです 二行説明があるんですが 上の方は ベンダープリフィックスがついています これは古い構文でもし古いブラウザーを 使いたい場合には この設定を使うんですが このレッスンでは 新しい方でご説明していきます そしてこの中は今回と考え方は一緒ですね 始まりの色 終わりの色 ブルーからホワイトへと to bottomだとこのようになります このようになりますと二つなんか同じ 映像画像があると思うのですが こちらはスクリーンショット 画像です ライブデモ これが実際の CSS の設定の結果と いうことですので 両方同じになればそれで オッケーということになります さらに下を見ていくと今度は to right ですね というと水平になります 左から右へ ブルーからホワイトのグラデーションを 左か右へというと このような形になります さらに to bottom right 二つ組み合わせることができます ということは 左上から右下へ ということですので 45度の角度の グラデーションがつきます さらに45度じゃなくて もうちょっと違った角度にしたいと いう場合には角度を指定することもできます 例えばこれは70度という場合の設定です ブラックからホワイト この左側はですね to rightの場合はこうですよと 比較のために設けられています つまり水平ですね 左から右 70度というふうにすると 45度よりもちょっときつい感じですから こういう方向ですかね 黒から白 というふうになります さらに下を見ていくと 90度ごとの典型的な設定の場合です 0の場合には 左から右ですね 3時の方向です 90度というと上の方向になります 12時の方向180度というと 今度は9時の方向ですね 左の方向になります マイナス90度というと下の方向 6時の方向です このように角度を指定することもできます さらにこのページは下を見ていると 複数の色を混ぜる場合とか 透明度が含まれる場合とか 今回使いませんでしたが リニアでなくて 放射状のグラデーション の説明などもありますので もし興味がある方は この 「CSSグラデーションの利用」のページを ご覧ください このレッスンでは 線形のグラデーション linear-gradient 関数を メニューの背景色に使いました リニアグラディエント関数の使い方としては 一つ目がまず方向です そしてカンマ区切りで 始まりの色 終わりの色 これを括弧の中に指定することで 線形のグラデーションが設定できます

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

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

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

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

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

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