CSS3によるタイポグラフィ

Modernizrでスクリプトをロードする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Modernizrを使ったJavaScriptファイルの読み込み方を解説します。
講師:
06:21

字幕

このレッスンではModernizrを使った javascriptファイルの読み込み方について 解説します DreamweaverCCで開いた HTMLドキュメントなんですが これはまだModernizrを使った 読み込み方ではありません ScriptのファイルはScript要素で 読み込んで その後jQuiryのJavascriptコードで lettering.js のメソッドを呼び出している という形です これを書き換えようと思うのですが まず現在の動作を確認します ファイルからブラウザでプレビューです このような状態になります 特にJavascriptのコードを使って Modernizrで変えても結果は変わらないのですが この同じ結果になればいいということです ではjQuiryとlettering.js この2つはscript要素で読み込まない コメント ”--” にしてしまいます その代わりにModernizrで読み込むので これはscriptで書きます 読み込みの命令 これは非常に簡単で Modernizr z rですので e が入らないよう気をつけて下さい load というメソッドです そして() この中には配列と言いますけど [ ]を括った形で やりたいことをどんどん書き込んでいきます そしてその書き込む内容というのは 今度はObjectというのですが { }で括ってその中にまた やりたいことを書いていきます まず読み込みたいのでloadという プロパティを設定します これはModernizrのloadという メソッドに対して このファイルを読み込みたい ということを教えることになります 読み込みたいのはこれですね これをそのままloadの後に持ってきます 複数読み込むこともできます その場合にはまたこの中を配列にして [ ]で括ってカンマ区切りで読み込みたい物を いくつでも並べることができます ではプラグインのlettering.js これも読み込みたい そしてModernizrで このloadメソッドで読み込むと 同時に読み込むことができます 良いですね 所が今回はよくありません 何故かというと lettering.jsというのは jQuiryのプラグインですから jQuiryより先に読み込んではいけないのです そういう場合には今度はこの{ }の後に カンマを区切って また{ }でやりたいことを書きます やりたいことは分けて読み込もう ということなので コピーをもってきて そしてまずjQuiryを読み込んでから カンマで区切ると空ということになりますね これをやってから これをやるということになりますので 次にプラグインをちゃんと順番に 読み込みましょう こういう細かい設定ができるんですね 同時に読み込むものは同時に 順番があるものは順番に そういう細かいコントロールができる所が Modernizrの良い所です そして読み込んだらやりたいことは jQuiryの行動を実行したいですね ですからこれもModernizrの中に 入れてしまいます ですからコメント "--" にして このloadが終わったらこれをやってと この中にカンマ区切りで続けます completeです completeというプロパティなんですが キーワードと思ってください やりたいことを書くんですけど Javascriptを実行したい時には function( ){ } というふうに設定します この中にやりたいことはもう書いてあるので コピーを持ってきます ちょっとインデントを整えましょう これでOKです 最初はscript要素で読み込み そしてscriptの要素の中に jQuiryのJavascriptコードを 書いていたのですが これらをすべてModernizrのほうで 制御するという形になります まずjQuiryの読み込みをして それが終わったらプラグインを読み込んで プラグインを読み込んだら プラグインを使った関数を実行する という手順になります Modernizrというクラス名 綴りが違ってますね 危ない所でした では保存してブラウザでプレビューします 結果として同じなんですけど ModernizrのJavascriptコードで 読み込むことができました このレッスンでは Javascriptファイルの読み込みと 読み込んだ後で実行したい Javascriptコードを Modernizrでどのように書けばいいか ということをご説明しました 使うメソッドはModernizr.load そして読み込みはこの{ }オブジェクトの中に loadというプロパティで読み込むファイルを 文字列で指定します そして読み込み終わったらというのは functionの中に実行したいJavascriptコードを そのまま書けばいいということでした

CSS3によるタイポグラフィ

このコースではCSSの基礎を理解された方を対象に、CSSを用いたさまざまな文字の魅力的な見せ方を紹介していきます。ひと文字単位で細かく文字をデザインしてゆく方法や、影やグラデーション、変形などを文字に設定する方法、またテキストを使ったアニメーションや便利なJavaScriptツール、Webフォントの使い方などについても解説します。

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

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

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

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