CSS3のグラデーション

放射状グラデーションを定める関数

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
放射状グラデーションを定める関数radial-gradient()の使い方をご紹介します。
講師:
04:56

字幕

このレッスンでは放射状の グラデーションを定める関数の 基本的な使い方についてご説明します いまブラウザでお見せしている グラデーションは中心が白 外側が黒 そしてグラデーションが 完全な正円という状態になっています こうした設定を グラデーションの関数で行うことができます Dreamweaverで開いている HTMLドキュメントは 要素に

要素があります Idがボックスで そのボックスのセレクターに対して 幅が900pixel 高さが500pixelという 領域が定められています そして背景としてbackgroundに グラデーションが定められているのですけど これは linear ですので線形のグラデーション ということになっています 現在の状況を確認しましょう ファイルメニューから ブラウザでプレビューします 縦が500pixel 横が900 細長い四角になっていますね その中で線形のグラデーションですので 白が上 そして下に行くに従って黒になる という設定になっています これを放射状のグラデーションに変えましょう 放射状のグラデーションも 同じグラデーションですから ネーミングは似通っています Linear-gradient が線形でした この線形というのが linear に表れているわけですが ここを放射状の場合には radial にします これだけで結構です 設定は白から黒 このカラーの設定の仕方も一緒です では確認しましょう ファイルを一旦保存しまして ブラウザでプレビューします そうするとグラデーションの 状態が変わりましたね 中心が白そして放射状に広がって 端っこが黒ということになります そして正円でなくてデフォルトでは この領域に合わせた楕円になります ではこれを正円にしたいと思います デフォルトの楕円のグラデーションを まん丸正円にするには 第一引数のオプションを加えます ですからこのホワイトの前ですね ここに circle と で カンマ(,)です オプションを加えます これがまん丸にしなさいということになります 保存してブラウザで確認しましょう ブラウザでプレビューです 今度はまん丸になりました 正円です 但し細長い縦と横の比が違いますので どちらかに合わせることになりますね 現在はこの長い方の辺に合っています ですから長いほうの辺で見て 端っこが丁度黒になるように グラデーションが設定されています ということは上下がはみ出した状態ですね 上下で見ると 上下は完全に黒になっていません これを上下で見たときに完全に黒になるように まん丸にしたいという場合には 更にオプションを加えます オプションの定数は第一引数の中に スペースで区切って加えます ですから circle,(カンマ)でなく スペース(空白)ですのでご注意ください そして縦に合わせたいわけなんですが 縦横という考え方ではありません ここでの定数はclosest-side 近い方の辺 短い方の辺に合わせてください という意味ですけれど これで縦に揃います ファイルを保存して確認しましょう ブラウザでプレビューです closest side = 近い方の辺 結果としては今縦が短いので 縦から見た上の上下の辺にちょうど黒の グラデーションの終端が来るように合いました ということは逆にこんどは 左右で見た場合は黒の領域が増えます レッスンをまとめます このレッスンでは放射状グラデーションを 定める関数において 基本的な使い方をご説明しました 関数はradial-gradient そして初めの色と終わりの色を指定する というのが基本ですが 第一引数に形状のオプションを 加えることができます そしてグラデーションですが 初めの色が真ん中 終わりの色が端ということで 中心から外向きということになります 第一引数の形状のオプションについては circle と入れると デフォルトの楕円が正円に変わります そして通常は長い方の辺に合った グラデーションになるのですが それを短い方の辺に合わせたい という場合には closest-side と言ってあげると 中心から最も近い方の辺で 終わりの色が来るように グラデーションの範囲が決まります

CSS3のグラデーション

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

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

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

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

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