CSS3のグラデーション

放射状グラデーションにカラーを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
放射状グラデーションを定める関数radial-gradient()の引数に、カラーを加えることができます。
講師:
05:21

字幕

このレッスンでは放射状グラデーションに カラーを加えたいと思います 今ブラウザでお見せしている 円形のグラデーション 放射状のグラデーションなんですけど 虹色になっています 赤からオレンジ 黄色 グリーン ブルー そして一番外側が紫ということで しかも円形で抜いてあります このような設定についてご説明しましょう Dreamweaver で開いている HTML ドキュメントは 要素に

要素 Id が box ということで定められていて そのスタイルとしては幅500 高さ500 という 正方形の領域に background は radial-gradient 放射状のグラデーションです そして今のところは白から黒という モノトーンのグラデーションになっています 確認してみましょう ファイルメニューからブラウザでプレビューです 中心が白 そして端が黒ということで グラデーションが設定されています まず白から黒のグラデーション これを逆に黒から白にしたいという場合 radial-gradient の場合には このカラーの順番を 入れ替えるということになります black, whiteで間にある”,”は抜きましょう 一応確認します ファイルを保存してブラウザでプレビュー すると黒から白というグラデーションになります それからグラデーションの終端なんですけど これはデフォルトでは端っこ 角になっています ですから白い部分がちょっと目立たなくなります 真ん中は真っ黒なんですけど この一番角が白ということになっています ではちょっと味気ないのでカラーを 変えていくことにしましょう とりあえず二色のままですけど 色をレッドからイエローに変えましょう そして保存して確認します ブラウザでプレビューです ちょっと綺麗な感じになりましたね 赤から黄色のグラデーションになります カラーを追加しましょう カラーを加えるには radial-gradient の関数に ,区切りでどんどんカラーを 足していけば結構です イエローの後にブルーにします 三色で確認しましょう ファイルを保存してブラウザでプレビューです 赤から黄色 そして青となりました もっとカラーを増やしましょう 虹色にしますので レッドの後に イエローとの間にオレンジ そしてイエローとブルーの間にグリーン 更にブルーの外にパープル― これで虹色になります 保存して確認しましょう ファイルを保存してブラウザでプレビューです 虹色ということなのですが カラーが増えたので紫の色がちょっと― 隅っこに追いやられていますね この時は この紫の位置が角に合うようにではなく 近い辺に合うようにすると紫の領域を もっと増やすことができます グラデーションの一番外側を 近い辺に合わせるというのは 関数の第一引数にオプションとして加えます closest-side と これで確認します ファイルを保存して ブラウザでプレビューしましょう 今度は紫の領域は広がりました 何故かというと近い辺にちょうど 紫が来るようにというふうになっています ではこのグラデーションを 円形で抜きたいと思います デフォルトの矩形― 四角の領域を丸く抜こうという場合には ボーダーの設定になります border-radius ですね これを 500pixel 四方になってるわけですけど 同じ数字 500pixel を入れます では保存して確認しましょう ファイルを’保存してブラウザでプレビューします これでボーダーが丸くなりましたので 結果として円形で抜いた形になります そしてグラデーションカラーは― 赤からオレンジ 黄色 緑 ブルー  そして紫 パープルということになりました このレッスンでは放射状グラデーションの カラーを増やしてみました 増やすときは単純に,区切りで 色をどんどん加えていけばいいということです そしてデフォルトでは角の所に 一番遠い角にカラーの端っこ グラデーションカラーの端っこが 合っているのですが それを近い方の辺にしたいという場合には closest-side というオプションを 最初の引数として加えます

CSS3のグラデーション

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

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

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

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

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