CSS3のグラデーション

ブラウザによって指定を変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザによって動作が異なる設定については、ベンダープレフィックスで個別に記述します。
講師:
04:19

字幕

このレッスンではブラウザによって 動作の異なるCSS の設定を使った場合 ブラウザごとにどうやって動きを 切り分けるかという説明をしたいと思います いまブラウザで見ているテキストには 縦方向 上から下に黄色から赤の 線形グラデーションがかかっています けれどもこの設定はブラウザによっては うまく動かない場合があります テキストにグラデーションをかけた HTML ドキュメントを Dreamweaver で開きました どのようにグラデーションを 設定しているかというと 要素の中にある h1 要素に 対してスタイルが設定してあり テキストではなく単に背景に 線形グラデーション 黄色から赤が設定されています そしてそのうえで text-fill-colorプロパティで テキストを透明にし それから webkit べンダープレフィックス webkit-background というプロパティで テキストを設定し テキストで形を抜いています ところが background-clipというプロパティは CSS の仕様の中にあるんですけど その仕様の中にテキストという値がありません これがあるのは webkit だけです ですから Safari で見た場合には 今のようにグラデーションが テキストにかかって見えます では違うブラウザで見てみましょう ファイルメニュー>ブラウザ>プレビューで Firefox ベンダープレフィックスは moz になります すると普通に背景にグラデーションがかかって 文字が乗っかっている状態になります これではちょっと見苦しいですね Firefoxでは グラデーションが テキストにかからないにしろ なんとかもうちょっと 見栄えのする形にしたいと思います Firefox でもテキストに色ぐらいつけましょう ということでカラーのプロパティを加えます そして赤と黄色の間をとってオレンジ そして webkit の場合には text-fill-color を transparent にしていますので カラーを設定しても問題ありません 確認してみましょう ファイルを保存して Safari でプレビューしてみます 問題ありませんね では改めて 今度はファイルのブラウザでプレビュー Firefox を選びます テキストはオレンジになりました けれど背景が加わっているので まだ見苦しい感じです Firefox ではこの背景が 表示されないようにしましょう webkit でないブラウザではグラデーションの 背景設定をなくしたいと思います その場合には linear-grandient の関数 これで線形グラデーションを つけているわけですけど その前にべンダープレフィックス webkit をつけてしまえばいいです コピーしてもってきます 同様に text-fill-color の transparent も やはり webkit 以外には使いませんので ここにも べンダープレフィックスをつけます 保存します そして Firefox で見てみましょう ブラウザで プレビューの Firefox です テキストがオレンジで表れ 背景は見えません では Safari であらためて確認します ブラウザで プレビューの Safari 大丈夫ですね もう1つ webkit の Google Chrome も見てみましょう こちらもテキストのグラデーションが ちゃんと対応しています このレッスンではブラウザによって動作の異なる CSS の設定を使った場合 ブラウザによってその動きの切り分けを するという方法をご説明しました べンダープレフィックスをうまく使って そのブラウザでだけ 動作させたいという設定には すべてべンダープレフィックスを つければいいということです

CSS3のグラデーション

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

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

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

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

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