CSS3のグラデーション

線形グラデーションの方向を定めるキーワードの注意

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
線形グラデーションに方向を定めるキーワードについてはブラウザのバージョンによって注意が必要です。
講師:
05:03

字幕

このレッスンでは 線形のグラデーションに方向を定める時 そのキーワードを ブラウザのバージョンによって 使い分けなければいけません その点について ご説明したいと思います 今 Dreamweaver で開いている html ドキュメント これは白から黒の グラデーションで linear-gradient() の関数に 色が指定してあります 方向は特に定めていませんので デフォルトでは上から下になります これを水平方向にしたいので left とします さて 勘の良い方は to left の間違いじゃないか?と そうなのですが 確認してみましょう 「保存」を押して 「ブラウザでプレビュー」します 何も出てきません 構文が間違っているからです では Dreamweaver に戻ります ここで to left と to を加えれば良いのですが あえて ベンダープレフィックスを この前に付けようと思います -webkit- です そして to は付けません このまま保存します そして ブラウザで見てみましょう 「ブラウザでプレビュー」です 今度は ちゃんとグラデーションが 水平にかかりました そして そのかかり方は左から右 左から右にかかっています では もう1度 Dreamweaver に戻ります 今度はベンダープレフィックスを 取ってしまいましょう すると left ではいけませんので to left です to left と設定しました これは正しい文法ですので 「保存」して確かめます 「ブラウザでプレビュー」です すると 水平に グラデーションがかかりました ただし 右から左です to left ですから 右から左 でも 先ほど left と指定した時は 左から右 逆方向になりました これを CSS リファレンスで 確認しましょう MDN のCSS リファレンスで linear-gradient 関数のページを開きました そして ブラウザ対応は仕様ですので 「仕様」を確認してみます すると 基本的には サポート OK なのですが 何かいろいろと注意書きがあります ( to なし)と書いてあります 「 Legacy な」 ということなので 古い構文です 古い構文では to が無かったのです 勧告候補では to を付けるのですが それよりも前の段階の仕様では to が無かったのです しかも その時の意味は from となります ですから left と指定して ベンダープレフィックスを付けると 古いバージョンの仕様に従って 左から右の方向に となったわけです 今度は グラデーションの方向を 角度で決めたいと思います to left とありますが 0 度(0 degree )なので 0 deg とします そして 「保存」を押して ブラウザでプレビューすると 0 度の方向にというわけで 0 度は時計の 12 時方向に 下から上へのグラデーションです また Dreamweaver に戻りましょう 今度はベンダープレフィックスを 付けてみたいと思います -webkit- です そして 古いバージョンでも 0 度(0 deg )という 指定の仕方は有効です では 保存してみましょう 「ブラウザでプレビュー」です ちゃんとグラデーションが かかりましたが 方向が違います 左から右になっています ベンダープレフィックスが付いた 古い仕様の場合には 0 度が時計の 3 時の方向を示します ですから 角度はちゃんと サポートされているのですが その起点が異なることに 注意が必要です レッスンをまとめましょう このレッスンでは グラデーションの方向を 指定する場合の 注意についてご説明しました まず 勧告候補 一番新しい場合― この場合 ベンダープレフィックスを付けません その時 to 方向キーワードという形で 終点を示します left とか right とか top / bottom です そして degree (角度)で 指定した場合には 0 は 12 時の方向です つまり 12 時から起算します けれど 勧告候補の前の段階の仕様 つまり ベンダープレフィックスを付けた場合 方向キーワードは to が付きません そして それは from の意味で どこから という起点になります degree はサポートされているのですが 0 度が 3 時の方向になりますので 注意が必要です

CSS3のグラデーション

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

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

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

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

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