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

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