CSS3のグラデーション

放射状グラデーションのサイズを変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
放射状グラデーションの広がりの大きさは、キーワードで変えられます。
講師:
06:05

字幕

このレッスンでは 放射状グラデーションの広がりの大きさを 変えるキーワードについてご説明します 今画面でブラウザで開いているグラデーションは 放射状のグラデーションでしかも この放射状のグラデーション自体は まん丸になっています そしてそのまん丸のグラデーションがちょうど このコーナーに完全に黒くなるように 合っているという状態です こうした設定を Linear-gradiate 関数のキーワードに 引数として加えてあげることによって 設定が変えられます Dreamwaever で開いている HTMLドキュメントは "div" 要素 "Id" "box" がありまして そのスタイルが設定されています 幅と高さは 900px × 500px そして background に radial-gradient で 白から黒 特にオプションとして設定は していませんので デフォルトのままの放射状のグラデーション ということになります では確認してみましょう ファイルからブラウザでプレビューです 楕円のグラデーションになりました そして白から黒ですが 黒がこのコーナーの所で ちょうど真っ黒になるように広がっています この広がり方をキーワードを設定することによって 変えていきましょう グラデーションの黒が角 つまり四隅の所で黒く終わるのではなくて 両端 辺の所で丁度黒くなるように 設定を変えたいと思います その時には radial-gradient の 関数の第一引数にキーワードを加えます 長い方の辺という意味なんですが farthest-side 遠い方のサイドですね そのキーワードを加えます farthest-side そして ,区切りです 保存して確認しましょう ファイルを保存してブラウザでプレビューします 長い方の端で真っ黒になるということなので 角の所の黒い領域が広がりました 先ほどお見せしたデフォルト状態の 楕円のグラデーションも実はタブに 残してありますので念のため比較しましょう デフォルト状態がこちらです ちょうど四隅 角で真っ黒になるように ということで白い領域がかなり広がっています それが farthest-side 遠い方の辺で黒くなる というふうにしましたので 黒い領域が 増えたとお分かりいただけるでしょう では他のキーワードも試してみたいと思います 遠い方があるのだから 近い方もあるだろう― その通りですね farthest は遠い場合です 近い方は closest となります closest-side ということで 保存して確認します ブラウザでプレビューです 先ほどと変わってないように見える― 変わっていません 実は楕円のグラデーションの場合には 一方を辺に合わせれば もう一方も辺に合ってしまいます ですから 遠い近いと言っても どちらも変わらないということです けれども意味がないわけではなくて このグラデーションを楕円でなく 正円にしてしまえば結果が変わってきます まん丸=正円の指定は第一引数に キーワードを加えます circle です そしてこれも第一引数ですので 間は,区切りでなくて Space で区切ります これでグラデーションが まん丸=正円になりますので closest の意味が生きてきます 確認しましょう ファイルを保存してブラウザでプレビューです 近い方の辺に合いました そしてまん丸ですから その分今度は遠い方の辺からは 黒い領域が 増えてくるということになっています では確認のため closest を farthest に戻してみましょう farthest です そして circle のキーワードがありますので 結果が変わってきます 一旦ファイルを保存して ブラウザでプレビューです 今度は遠い方の辺で黒が 終わるということになっています ということでグラデーションからすると 白い領域が上下ははみ出た― という感じになっていますね さらに farthest-side を farthest-corner にして 比べてみることにしましょう farthest-corner です corner というのは角ということですので 遠い方の角に合うということになります 一旦保存しまして ブラウザでプレビューします 今度はコーナーの所で真っ黒になります 先ほどの状態をタブで残してありますので farthest-side の場合ですね side のほうが corner より 黒い領域が多いということが おわかりいただけるかと思います このレッスンでは放射状グラデーションの 広がりを決める サイズのキーワードについてご紹介しました キーワードは全部で4つあります まずは closest-side 近い方の辺に― 放射状のグラデーションの端っこが 終点が合うということですね それから closest-corner は近い方の角に その終端が合う 始まりから終わり その終わりのカラーが合います それから farthest-side 遠い方の辺に グラデーションの端が接する そして4つ目 farthest-corner これは中心から最も遠い角に接する― ということです closest-corner を確認しなかったのですが グラデーションの中心が真ん中にある限り 遠いコーナーも近いコーナーもありませんね 同じですので それは紹介しませんでした

CSS3のグラデーション

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

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

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

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

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