WebデザイナーのためのCSS3実践講座

ベンダープレフィックスとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSS3を、様々なブラウザで表示させる為のベンダープレフィックスという仕組みについて、ご紹介致します。
講師:
03:58

字幕

このレッスンでは CSS3 を様々な ブラウザで表示させる為の― ベンダープレフェックスという 仕組みについてご紹介していきます CSS3 では 新しい機能がたくさん 追加されていますが― そのいくつかの機能に関しては まだ草案状態のものがあります そこで 各ブラウザがその草案状態の 機能を先行実装という形で― ブラウザに取り込んでいるものがあります そういった先行実装された機能に アクセスする為の物が― このベンダープレフェックスと いうものになります それでは ベンダープレフェックスが どういったものなのかについて― みていきたいと思います こちらがベンダープレフェックスと その各対応ブラウザを表した表となります ベンダープレフェックスとは CSS のプロパーティーの頭に付ける― こういった接頭辞のことを指します 例えば CSS3 の新しいプロパーティーに ボックスシャドーというものがありますが― このボックスシャドーを利用する為に― 例えば ファイヤーフォックスを 対象にした場合 頭に― この様な文字を付ける必要があります 例えば これがクロームやサファリといった ブラウザになると 今度は頭にこういった― webkit といった文字を 付ける必要があります 同じようにインターネット エキスプローラー であれば このように ms ― オペラであれば このように o という形で頭に置いてあげる必要があります このように新しく追加された CSS プロパーティーの頭に― 各ブラウザに対応した 接頭辞を付けてあげることで― どのブラウザにも対応した形で CSS3 の プロパーティーを利用できるように― なる訳ですね 但し こういったベンダープレフェックスは 各ブラウザが CSS3 の新機能を― 正式採用された段階でこの接頭辞を 付ける必要はなくなってきます ですので 正式採用された場合は こういった頭に付いた moz や― webkit という文字を書かずに そのまま box-shadow と― 書いてあげるだけできちんと 動作するようになります その対応状況ですが インターネットで 検索すると 確認することができます 色々なサイトがそういった情報を 提供していますが ここでは― その一つをご紹介します このサイトは findmebyIP.com というサイトとなりますが― こちらのサイトでは HTML ファイルや CSS3 の各ブラウザ毎の対応状況などを― 表にまとめてくれています こちらをみていきますと こういった形で CSS プロパーティーということで― ブラウザ毎に対応していれば こちらの緑の チェックマーク 対応されていなければ― × といったかたちになっています このようにみていきますと このビデオを収録している段階においては かなり多くの CSS プロパーティーが― 対応されている という形になっていますね CSS3 を使う時には こういった表も 参考にしながら 必要に応じて― ベンダープレフェックスを 付けるようにしてください 因みに このコースでは クロムブラウザを使って― レッスンを進めていきますので ご自身が使っているブラウザに合わせて― 適宜 ベンダープレフェックスを 付けるようにしてください 以上でレッスンは終了です 今回は CSS を様々なブラウザで 表示させる為のベンダープレフェックス― という仕組みについてご紹介しました 以降のレッスンからは CSS3 を使った ウェブフォントの利用方法について― 解説していきますので そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

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

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

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

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