CSS3のグラデーション

ブラウザの互換性を確かめる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSのブラウザごとの互換性が調べられるサイトをご紹介します。
講師:
04:51

字幕

このレッスンでは CSS3 の機能について ブラウザごとの対応・互換性を 調べるためのサイトを2つご紹介します 1つ目は「 Can I use 」と言う 有名なサイトです 機能ごとの一覧表示で 互換性をチェックできます もう1つは「 CSS リファレンス」です これは Mozilla Developer Network の CSS リファレンスです 非常に情報が詳細です まず「 Can I use 」です これは検索で文字通り 「 can i use 」でもう出てきます このキーワードで検索すれば トップで出てきます ここでは CSS3 に限らず HTML5 に SVG JavaScript の API 等々の ブラウザごとの互換性を 一覧表で確認できます 今回はグラデーションについて調べたいので この CSS の中の 少し下にスクロールして 「 Gradients 」を選ぶと ブラウザごとに IE (インターネットエクスプローラ) FireFox Chrome Safari Opera それから モバイル用です それらについて ブラウザの バージョンごとの互換性が確かめられます 緑は互換性が大丈夫のものです 赤は駄目ということになります さらに 日本と 全世界の 普及状況が分かります 日本の方が 93% ですので 世界の平均と比べると 普及率は良いようです しかも EI の 11 だと Japan は 21.26% です 日本では IE が使われている率が 非常に高いようです それから FireFox は 3.5% くらいですので Global と一緒です Chrome は日本が少し低い Safari は 1.4% 程度 同じということで ブラウザごと 更にバージョンごとの 普及率も確かめることができます ただ Gradients とありますように グラデーションの機能を発揮するための それを使うためのプロパティや関数は 実は細かくあります ですから その細かい1つ1つの機能 関数 プロパティについて調べたい時は リファレンスを使った方が良いでしょう 「 CSS リファレンス」を まず Google で検索することにしましょう キーワードは「css 」それから Mozilla Developer Network の 頭文字 「 mdn 」と入れると 「 CSS リファレンス」が出てきます 上でも結構ですが リファレンスを直接見たい場合は この「 CSS リファレンス」を クリックして選びます これはリファレンスですので 各プロパティ 各関数ごとに それぞれの互換性や 勿論 文法なども確かめられます 例えば グラデーションの中で 線形グラデーションは 「 Linear Gradients 」ですので 「 linear-gradients() 」という 関数を選択すると まずは概要があり 細かい説明があります 図説です 図で説明されています 構文について それから値 それぞれどんな値が取れるのか といった細かい説明がありますが 今回はブラウザの互換性を調べたいので もっと下の方にあるのですが このリンクですぐに飛べますので 「仕様」を見てみます すると 先ほどの「 Can I use 」では 「最近のブラウザでしたら グラデーションは大丈夫」 とあったのですが ここを見てみると 「基本サポート」は FireFox Chrome IE Opera Safari が 大丈夫ですが 下の方に更に細かく書いてあります 構文ごとに 使う構文によっては サポートしていたり いなかったり とありますので 具体的なプロパティや関数を 調べたい時には このリファレンスで確かめるのが確実です このレッスンでは CSS の機能の ブラウザごとの対応を 調べる方法についてご説明しました サイトを2つご紹介したのですが 1つ目は機能ごとに一覧表示してくれる 「 Can I use 」です URL はここにご紹介した通り 「 caniuse.com 」です 更に細かく 機能を プロパティとか関数ごとに 具体的に調べたい時には やはりリファレンスを見た方が良いでしょう 今回 ご紹介したのは MDN ( Mozilla Developer Network )の 「 CSS リファレンス」です 「 CSS リファレンス」の URL も 合わせてご紹介しました こちらで確認しましょう

CSS3のグラデーション

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

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

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

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

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