CSS3のグラデーション

ベンダープレフィックス

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザに先行実装されたプロパティや関数につける記号「ベンダープレフィックス」についてご説明します。
講師:
05:55

字幕

このレッスンでは CSS のプロパティや関数の前に付ける記号 ベンダープレフィックスについて ご紹介したいと思います 今 Dreamweaver で html ドキュメントを開いています そして バックグラウンドプロパティの設定が 5行に渡って書いてあります 基本的には同じ様なことが書いてあるのですが 頭に記号が付いています 例えば -webkit- とか -moz- とか これがベンダープレフィックスというものです CSS リファレンスで確認してみましょう MDN の CSS リファレンスで 線形グラデーションを扱う関数 linear-gradient の ページを開きました その仕様を見てみます すると 現在 この関数は 仕様書としては 勧告候補になっています もう間もなく 勧告として 正式に採用されそうです この正式に採用される一歩手前の 勧告候補となると 実は ベンダープレフィックスは いらなくなります けれど その段階に至っていない時 ですから古いブラウザの場合です その場合には まだ正式にはこの関数は使えない でもベンダーがユーザーのために 先行して実装することが行われます その場合にはまだ正式ではないけれど ベンダー つまり ブラウザの開発元が 先行して付けたことを示すために 先ほど見た - moz とか -webkit あと -o もあります こうした頭に付ける記号 この頭に付ける記号のことを 接頭辞と言い 英語ではプレフィックス ですから ベンダーごとに付ける プレフィックスというのがあって それは この機能が まだ正式に 勧告候補とされる前の段階だけど 先行して実装することを示します ですから古いブラウザで この linear-gradient の 関数を使いたい時には この接頭辞を付けなけばなりません Dreamweaver で開いたのは まだ バックグラウンドのプロパティを 設定する前の html ドキュメントです では ここにバックグラウンドとして グラデーションを設定してみましょう Background で 先ほど CSS リファレンスで見た linear-gragient() そして どの色からどの色へ グラデーションするか 2つの値を設定するのですが ここでは単純に 白から黒にしたいと思います では これで保存をして 確認してみましょう 「ファイル」を「保存」し 「ブラウザでプレビュー」します すると 白から黒の グラデーションが設定されました ベンダープレフィックスを 付けていませんが 最近のブラウザであれば この様に対応しています ではもう一度 Dreamweaver に戻りましょう 要素には

要素で id = "box" という要素が入っています それに対して 幅と高さは 両方とも 500 ピクセル そこに背景のグラデーションが付きました 最近のブラウザであれば これで全く問題ありません けれども まだ古い 先行実装段階のブラウザでも 見られるようにしたい場合には ベンダープレフィックスを付けた 記述を加える必要があります これを「コピー」して 「ペースト」します まず 1つ目は -webkit- としましょう これで Chrome あるいは Safari の方で 古いブラウザでも対応します 更にもう1つ加えましょう ペーストします ここは Mozilla FireFox で -moz- 更にペーストして Opera の場合には -o- です そして Internet Explorer MicroSoft です これは -ms- と入れます こんなにいっぱい書いても大丈夫か? と思うかもしれませんが そのブラウザに対応しない場合― 例えば Safari で確認する場合には -webkit- ですので -moz- とか -o- とか -ms- は無視されます 新しいブラウザであれば ベンダープレフィックスの無い この記述が有効になります ということで ブラウザの方で 使えるものを使います レッスンをまとめましょう このレッスンでは ベンダープレフィックスについて ご紹介しました これはブラウザベンダーが 拡張 あるいは先行実装した機能に 付ける記号です プロパティや関数の頭に付ける 識別子ということで接頭辞 英語でプレフィックスになります そして 勧告候補になったら ベンダープレフィックスは 付けないことになります 具体的なベンダープレフィックスの種類は -webkit- は Google Chrome と Safari になります Mozilla の -moz- は FireFox Opera は -o- それから -ms- MicroSoft です これが Internet Explorer の ベンダープレフィックスになっています

CSS3のグラデーション

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

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

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

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

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