CSS3のグラデーション

放射状グラデーションを細かく設定する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
放射状グラデーションのカラーや中心の位置などを細かく設定してみます。
講師:
07:42

字幕

このレッスンでは放射状のグラデーションに 細かな設定を加えてみます いまブラウザお見せしている グラデーションですけれども 白と黒しか使っていないのですが 白の円盤のようなものが真ん中にあって 蛍光灯のような白いリングが浮かんでいます あとこのグラデーションの中心の位置 少し左に寄ってますね こうした細かな設定を radial-gradient の 関数に加えてみましょう Dreamweaver で開いている HTML ドキュメントは にある

要素 に対してスタイルを設定しており 幅が 800px 高さが 500px です そして background に対して radial-gradient の関数が使ってあり デフォルト状態ですけど カラーはホワイトから ブラックとういことで設定してあります では まずこの状態を確認しましょう ファイルメニューから ブラウザでプレビューします そうすると中心が白 角が黒ということで グラデーションが楕円形に広がっています では これを少しずつ変化させていきます まず 放射状のグラデーションはまん丸 正円にしたいと思います 関数の第一引数に circle と入れます これで正円になりますので 確認します 保存して ブラウザでプレビューです 円形のグラデーションになりました 但し四隅の所で最後の色― 黒ですね 黒になっているので 上下を見ると白い領域がはみ出したような 感じになっています これをこの矩形の領域 長方形の領域の中に 収めたいと思います 上下は少しはみ出してもいいので 左右 横がきっちり収まって 両端でビシッと黒になるように 決めたいと思います その場合にはここにキーワードを追加して farthest ですね 端というのは side です これで両端で完全に黒くなります 確認していきましょう 保存してブラウザでプレビューです 両端で完全に黒くなっています ですからコーナーの方も黒い領域が増えました 更にカラーを加えてみましょう グラデーションの中心に黒を加えます ですから 第一引数の後に black としましょう black white black と三色になります ファイルを保存して また確認します ブラウザでプレビューです まん中が黒 そして白に変わり 最後に両端で黒くなります この範囲は均等ですね 特に指定はしていませんので 均等に黒から白 白から黒というふうに グラデーションが変化しています この変化の割合を変えてみることにしましょう グラデーションカラーの黒 白 黒の 白の後にパーセンテージを加えます 25% つまり全体の 25% の位置で 白が入るということになります 確認します 保存して ブラウザでプレビューです 白の領域が狭まっていますね この白の縁が小さくなっています ここが 25%の領域ということになります 更にカラーを加えます また中心に今度は白です white ということで この black に対しても パーセンテージの指定をします 25%というふうにしましょう すると white とぶつかってしまいますので white のほうは 75 とします これで保存して確認してみましょう ブラウザでプレビューします 白が加わり 25%で黒になり 75%で白になります そして最後は黒ということで グラデーションができました 今度は中心位置を変えてみます グラデーションの中心は第一引数に 更にキーワードを加えます circle farthest-side この後に左端を グラデーションの中心にしたいと思います その時は "at" の後に キーワード "left” です そうするとグラデーションが左端に 動くことになります ファイルを保存して ブラウザでプレビューしましょう グラデーションの中心が左端になっています 更に放射状グラデーションの設定を 変えてみましょう farthest-side は では近い方ということで closest に変えます closest-side 近い方の辺の所で 最後の black が決まるということです それから "at" の後 キーワードで ”left” "right" "bottom" を 使ってもいいのですが もう1つ パーセンテージで指定することができます その場合には 水平と垂直2つ数字が要ります ここでは水平で40% 真ん中より少し左寄り そして垂直は真ん中ということで 50%とします これで確認してみましょう ファイルを保存して ブラウザでプレビューです 中心位置が水平に 少し左側にずれています では もう少し手を加えてみることにします カラーをもう1つ加えて調整します 中心に white white が2つになっても構いません ただ同じ位置ではありませんので 少しずらして 25%とします そうすると真ん中が white そして 25%までは white が続きます ですから グラデーションといいますけど ここは白のべた塗りが 25%まで続く ということになります black がぶつかりますので これは 50%としましょう これでファイルを保存して確認します ブラウザでプレビューです 中心が white そして 25%まで white がベタっと続きます その後 50%の黒に グラデーションしますので 少しここが丸みを帯びたような表現に見えます それから 75%の白 100%の黒ということで ちょうどドーナツ状の白が加わりました このレッスンでは放射状のグラデーションに 細かな設定を加えてみました まずはキーワードですけど "circle"―まん丸ですね それから近い方 遠い方ですと "farthest-side" "at" の後に位置指定をします "left" "right" "top" "bottom" といった キーワードも使えますし 水平方向 垂直方向のパーセンテージで 指定することもできます あとはカラーなんですけど カラーを,区切りで繋げていけばいいですが パーセンテージで位置が指定できます それから同じ色のグラデーションにすると― その間がべた塗りになるということを ご紹介しました

CSS3のグラデーション

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

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

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

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

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