CSS3のグラデーション

線形グラデーションのカラーを増やす

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
線形グラデーションの関数linear-gradient()の引数には、用いるカラーをいくつでも加えることができます。
講師:
05:12

字幕

このレッスンでは 線形グラデーションに用いる カラーの数を増やしたいと思います 今 画面でお見せしている グラデーションは 左下が赤から始まる 虹色で 最後が紫となっています 細かく申しますと 分かりにくいかもしれませんが 赤から オレンジ そして 黄色 緑 青 紫という グラデーションになっています こうした 色数を増やす設定について ご説明します Dreamweaver で開いた html ドキュメントには 既に グラデーションの設定がしてあります には

要素 id が "box" というものがあって それに対する スタイルの設定は 幅と高さが 500 ピクセル それに対して 背景 background が linear-gradient() の関数で white から black の 設定になっています 方向の指定はありませんから デフォルトの上から下の グラデーションになります これを 一旦確認しておきましょう 「ファイル」メニューから 「ブラウザでプレビュー」します そうすると デフォルトの 上から下へのグラデーションで 始まりのカラーが白 終わりのカラーが黒になっています このカラーをまず 変更しましょう 始まりの色は white ではなく red とします そして 終わりの色を まずは yellow にしましょう カラーが変わっただけで 方向は上から下です 確認しましょう 一旦「保存」を押して 「ブラウザでプレビュー」です カラーが変わって 上が赤 下が黄色の グラデーションになりました 色数を増やしていきます また Dreamweaver に戻って 色数を増やすのは簡単です 引数を , (カンマ)区切りで どんどん加えていけば良いのです では yellow の後に 今度は blue にしましょう そして 一旦 保存して確認します カラーが3つに増えました 「ブラウザでプレビュー」をすると 赤から黄色 ブルー 特に指定を加えていないと これは均等になります つまり 赤が一番上 ブルーが一番下 そして カラーを3つにしましたので 真ん中が黄色になります どんどんカラーを増やしましょう Dreamweaver に戻ります 虹色というのは 赤外線・紫外線とあるように 赤から始まって紫で終わります ですから ここに更に 紫を加えます 紫は purple です 加えまして― また 確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します すると 赤から黄色 ブルー そして紫と 大分 虹色っぽくなったのですが グリーンがはっきりしません そして グリーンを入れるとすると オレンジを入れないと カラーの均等バランスが良くないので オレンジとグリーンを加えたいと思います orange は red と yellow の 間に入ります そして green は yellow と blue の間です また 確認します 「ファイル」を「保存」して 「ブラウザでプレビュー」です これで虹色らしくなりました 赤からオレンジ オレンジは少し分かりにくいかもしれません そして 黄色 グリーンがしっかり入って ブルーと紫で 虹色になりました 勿論 グラデーションの方向を 定めることも可能です 方向は左下から右上にしたいと思います 第1引数に方向を加えましょう to top right でも構いませんが 45 度としたほうが簡単です 45 degree で 45 deg と打って 確認します 「ファイル」を「保存」して 「ブラウザでプレビュー」です すると 左下が赤 右上が紫 途中の色 カラーの指定を カラーストップといいます ここまでで このカラーにしなさい というカラーストップを指定しました 赤からオレンジ オレンジから黄色 グリーンがしっかり入って ブルー 紫 というグラデーションになりました 対角線になりましたので グラデーションの幅も広がっています このレッスンでは― グラデーションの色数を増やす方法 についてご説明しました その場合 引数として カラーを , 区切りで どんどん足していけば良いのです ちなみに このカラーのことを カラーストップといいます ここまでで この色に変わる という指定ですから カラーの終端 おしまいの所ということで カラーストップです それから 勿論 カラーの方向 グラデーションカラーの方向を 最初の引数として指定できます

CSS3のグラデーション

CSS3のグラデーション機能はW3Cで勧告候補となり、最新のブラウザであれば使えるようになりました。このコースでは線形や放射状のグラデーションの構文や使い方を詳しく解説します。グラデーションを使ったパターンやテクスチャの作例を一歩一歩段階的に作り進めながら、必要に応じて文法的な説明も加え、細かな設定やオプションまで広くカバーしています。

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

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

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

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