CSS3のアニメーションテクニック

ベンダープレフィックスを省略するライブラリ-prefix-free

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ベンダープレフィックスを自動的につける便利なツール-prefix-freeのご紹介と、その設定についてご説明します。
講師:
02:44

字幕

このレッスンでは CSS3のコードを書く時に ベンダープリフィックスを いちいちつけるのを避けるツール プリフィックスフリーをご紹介します ベンダープリフィックスというのは ブラウザーが 先行実装したCSS3に つけるものです プリフィックスということなので 前につけます 前につける記号なんですけれども その記号としては 例えば -webkit というのはクローム サファリ -moz がファイヤーフォックス -msがインターネット・エクスプローラー そしてオペラが-o それぞれ頭にハイフンがつきます こうしたベンダープリフィックスを ブラウザーが先行実装した CSS にはつけなければいけません けれども先行実装したといことですから 正式に使われるようになれば このベンダープリフィックスはいらなくなります また学習する際にいちいちこれをつけていると 理解の妨げになりますので ツールを使って入力の手間を省き 理解しやすいように ということでツールを紹介しています こちらが プリフィックスフリーの ダウンロドサイトです このサイトはグーグルで 「プリフィックスフリー」 で検索すれば すぐに探すことができます そしてこのくるくる回っているボタンを クリックすれば直ちにダウンロードはできます ダウンロードしたファイルは ライブラリー用のフォルダーを決めて そこに入れてください 今 Dreamweaver で HTML ドキュメントを開いています そしてライブラリーは Java Script ファイルですので スクリプト要素で読み込みます そしてそのソースです 「参照」のボタンをクリックします そして lib という フォルダーにライブラリーを入れました そん中に prefixfree.min.js と いうJava Script ファイルがあります これが そのプリフィックスフリーのツールです 開きましょう あとは スクリプト要素を閉じれば結構です そして保存します Java Scriptの ライブラリーですけれども 決して Javascript の コードを書く必要はありません この Java Script ライブラリーが プリフィックス ベンダープリフィックスを 自動的につけてくれる ですからここに 書いておくだけで結構です このレッスンでは CSS3のコードを書く時 ベンダープリフィックスを いちいちつけるのを 手間を省いてくれるツール プリフィックスフリーと その使い方についてご説明しました

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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