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

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

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

ぜひご覧ください。

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

字幕

このレッスンでは CSSのコードに ベンダープレフィックスを付けずにすむ 便利なツールをご紹介したいと思います そのツールの 名前は ”Prefix-free" です JavaScript ライブラリで入れると ベンダーフィックスのない状態の プロパティーをどんどん書いてしまうと このツール ライブラリは それぞれに ベンダープレフィックスを いちいち付けて 動くようにしてくれる そういう機能を果たします このサイトは ”Prefixfee"の名前を覚えれば Googleで簡単に 検索することができます “Prefixfree”と 日本語の このサイトは おそらく説明ですので この2番目です これをクリックすると 先ほどの サイトを開くことができます ダウンロードは このボタンを押すと すぐに ダウンロードが始まります ここでは 押しませんが ダウンロードがしてあります 押せば 結構です サイトからダウンロードされた ファイルの名前は ”Prefixfree.min.js” JavaScriptのファイルです JavaScriptの ライブラリを入れる フォルダーを決めておいて そこに 収めればいいでしょう ここでは"lib"というフォルダー 未だ 空っぽなんですけれども ここに 入れておくことにします この"sample.html" このファイルを HTMLの編集ソフト Dreamweaverを使います このライブラリを 読み込んでみましょう Dreamweaverに 切り替えます HTMLドキュメントで JavaScriptファイルを 読み込むには スクリプト要素を使います "script" と ソースを指定します ここで先ほどの "lib"というフォルダー あそこに入れた”Prefixfree”を 読み込みます この最初のボタンを クリックすると "lib"という フォルダーを見つけて 指定することができます スクリプトの要素は 必ず閉じます プレフィックスですね もう 要らなくなります プレフィックスのない box-shadowのプロパティーだけで Prefixfreeが 自動的に プレフィックスを 割り振ってくれるので コメントアウト してしまいましょう 後のほうにも box-shadowとか あるんですけれども ここは このままで平気です プレフィックスがない状態 ベンダープレフィックスを 書かずにも このPrefixfreeという JavaScriptファイルが どんどん追加をして 設定してくれる ですから CSSのコードが 非常に短くなります このレッスンでは 私達に代わって ベンダープレフィックスを付けてくれる ベンダーツールー "Prefix-free"のご紹介と 設定方法を ご説明しました "Prefix-free" をー ダウンロードして 適切な自分で決めた フォルダーの中に入れる HTMLドキュメントの編集で スクリプト要素に その Prefixfreeの JavaScriptファイルを読み込む これさえしてしまえば プレフィックス ベンダープレフィックスは付けずにー プレフィックスのない状態で 設定をすれば ”全てPre-fixfree"がー ベンダープレフィックスを 付けてくれるということです

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

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

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

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

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

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