CSS3のグラデーション

線形グラデーションの方向を変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
線形グラデーションは、方向キーワードや角度をさまざまに変えることができます。
講師:
04:02

字幕

このレッスンでは 線形グラデーションの方向を 様々に変える方法について ご説明します 今 画面で見ているグラデーションは 左下から右上に 45 度の角度で グラデーションを設定されています こうした角度の設定も可能です 今 画面で開いている html ドキュメントでは 背景にグラデーションが 定められています linear-gradient() 線形グラデーションです そして 白から黒へということで 特に方向の設定はしていません この場合にはデフォルトで 上から下の設定になっています 確認してみましょう 「ファイル」で 「ブラウザでプレビュー」します 上が白 下が黒の 白から黒への グラデーションになっています この方向をいろいろ 変えてみたいと思います まず グラデーションの方向を逆に 下から上にしたいと思います その場合 この linear-gradient() の 関数の最初にtoですね 「下から上へ」という意味の to top を付けます そして 「保存」をして 「ブラウザでプレビュー」すると 下が白 上が黒 下から上へのグラデーションになりました では 斜めにするには どうしたら良いでしょうか? 今は linear-gradient() の関数に to top で上方向となっています 例えば 右方向だと to right とすれば良いわけです 実は上下の方向と 左右の方向は 組み合わせられます どうするかというと この top の後に right を加えます to top right です これで確認しましょう ファイルを一旦保存して 「ブラウザでプレビュー」します そうすると 左下から 右上へ( to top right )の 斜めのグラデーションに なるということです 更に 関数の引数の 第1引数ですが to の後に方向キーワードを 書く以外にも 角度を指定することもできます 例えば角度が 0 度の場合は degree の 0 deg と入れます そして「ファイル」を「保存」して 「ブラウザでプレビュー」すると 下から上になります つまり 0 度と言うのは 時計の 12時 の方向を基準にします ということは 左下から右上の場合 角度は 45 度です この degree で試してみましょう 0 deg という第1引数の指定を 45 に変えれば 左下から右上になります 確認しましょう 「保存」を押して 「ブラウザでプレビュー」します 左下から右上です degree を使えば 勿論 45 度 90 度といった 切りの良い数字でなくて 72 度といったことも指定できます レッスンをまとめます このレッスンでは グラデーションの方向の 定め方についてご説明しました to の後にキーワードを使うと left / right / top / bottom という風に それぞれの方向に グラデーションを指定できます そして このグラデーションの方向は 終点を示すのですが 水平と垂直の2つを 組み合わせても良いです top right とか bottom left とか 組み合わせられます 更に 角度を指定することもできます この場合には角度の後に 単位の deg を付けてて下さい

CSS3のグラデーション

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

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

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

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

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