はじめてのCSS3アニメーション

CSS3のベンダープレフィックス(接頭辞)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
仕様が草案段階のプロパティを使ったり、古いブラウザで最新のプロパティを使いたいときは、ベンダープレフィックスを設定する必要があります。
講師:
06:05

字幕

このレッスンでは ベンダープレフィックスを ご説明します ベンダープレフィックスというのは CSS3の機能が 未だ 草案段階であったりして 実験的に使われている 実験的に決められたものを ブラウザで 独自に使いたいという場合に 気にしなければなりません あるいは現在 普通に使われている項目 プロパティーであっても 古いブラウザで それを使いたいと場合には ベンダープレフィックスを 気にしなければなりません "MDN" Mozilla Developer Networkの CSSリファレンスで box-shadowの項目を 開いてみました box-shadowは 最新のブラウザであれば 使うことができます この仕様を 見てみましょう 仕様を見ると その仕様は "勧告候補"となっています 未だ 勧告にはなっていませんが 近いうちに 勧告として認められそうという かなり固まった段階です この段階になると ベンダープレフィックスは 気にする必要がありません けれども 古いブラウザで 使いたいという場合には ベンダープレフィックスを 付ける必要があります それは この実装状況を 見ていただくと バージョンが書いてあり 最新のバージョンであれば 特に 何もいらないのですが 古いバージョンの場合には Chrome あるいは Safari であれば "ハイフン webkit" Firefox は "ハイフン moz" これが "ベンダープレフィックス"です この ベンダープレフィックスを プロパティーの前に付けます プレフィックスというのは "接頭辞" "前に付ける記号" ということですので " 接頭辞 プレフィックス" です "ベンダー"というのは ブラウザの開発元です 開発元ごとに異なる記号 "接頭辞を付ける"ということで "ベンダープレフィックス" といわれています もう一つ CSSリファレンスで transformという プロパティーを見てみます "これは実験段階の機能です" と書いてあります まだ 勧告には ちょっと遠いということです 実際 仕様のほうを 見てみると "草案"と書いてあります 草案の段階では 原則として ブラウザでは 使えない ということになるのですが そうも言ってられません 各ブラウザは 独自に この機能を取り入れる その代わりー これは 未だ独自機能 ということを示すために ペンダープレフィックスを付けて トランスフォームなら トランスフォームという プロパティーを付けて 設定をします 逆に言えば この接頭辞を付ければ これらの古いブラウザでも 使うことが 出来るということです 例えば Dremweaverで開いた HTMLドキュメントですが その中の box-shadow これを 古いChromeで 動かしたいと 思ったとしましょう その場合 ベンダープレフィックスを どう使うか? これをまず コピーして そのまま ペーストします 同じものを 2行に渡って書きます 但し これは 古いブラウザ用に書きます "ハイフン webkit" "ハイフン webkit ハイフン" を 付けた上で box-shadow というふうに繋げます その後の指定の仕方は もちろん一緒です こうしてあげると Chromeでも バージョンが 古かったとしても ちゃんと 対応した 実験的に実装した Chromeのブラウザであれば 動かすことが出来ます さらに Firefoxでも 動かしたいなと Firefoxの古いバージョンでも 動かしたいという場合には もう1行 またペーストします そして この場合は 今度は モジラの "moz"です こう書けば Firefox あるいは Safariも mozですので Safariでも 動かすことが 出来ます この3行目 これは 何も 付いていません 最新 ブラウザ向けと いうことになります ブラウザは それぞれごとに 認識できるものを認識します 例えば WebkitはChromeが認識し mozは Chromeを認識しません FirefoxとSafariは これを認識する 一番新しい ブラウザは? 大抵の場合ー ベンダープレフィックスと 両方認識して 新しいほうで 上手く 機能させてくれる とはいえ CSSの原則でいうと 2つ同じものが 認識できる 同じ機能のものが 設定されていた場合には 後のものが 上書きというかー 有効になりますので ベンダープレフィックスを 先に書いて 最後に ベンダープレフィックスなし 正式に 導入された場合です その場合に これが ちゃんと動くように 最新のブラウザであればー この最新の設定を使って 動くように 最後に書いておくのが 一応 原則としては良い このレッスンでは "ベンダープレフィックス"について 学びました ベンダープレフィックスは 未だ 仕様が 草案段階の場合に ベンダー つまり ブラウザの開発メーカーが 独自に実装した機能です それを 使いたいときには ベンダーごとの接頭辞を 使いたいプロパティーの 前に置くということです "ハイフン Webkit"は Chrome Safari "ハイフン moz"は Firefox "ハイフン"ms"が Internet Explorer "ハイフン o" が Operaです 正式な勧告 あるいは ちょっと前の勧告候補になると ベンダープレフィックスは 付ける必要がなくなるので ベンダープレフィックスのない 指定も必ず 最後に置いておくように しましょう

はじめてのCSS3アニメーション

最近のブラウザではCSS3の実装が進み、JavaScriptを使わなくてもダイナミックでインタラクティブなコンテンツが作れるようになってきました。このコースではこれまでの静的なCSSの基礎を学んだ方を対象に、そのようなアニメーションをCSSでどう定めればいいのか、その書き方や考え方について解説します。

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

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

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

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