CSS3によるタイポグラフィ

条件に応じた素材のロード

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
機能がサポートされているかModernizrで確かめたうえでファイルを読み込む方法についてご説明します。
講師:
03:43

字幕

このレッスンではModernizrでファイルを 読み込むときに その前にある機能があるかないかを確かめて それによって読み込むか読み込まないか決める というJavascriptコードの 書き方をご紹介します DreamweaverCCで開いた HTMLドキュメントはすでにModernizrで jQuiryの読み込みとプラグインの 読み込みを行っています しかしよく見るとエッジフォント これも読み込みをscript要素で行っています これもやはりModernizrで 読み込んでみることにしましょう ではコメントアウトしてしまって lettering.jsが読み込まれたら 次にエッジフォントを1つ読み込みましょう またカンマの後に{ }を加えて 同じようにload:としても構いません そしてこのエッジフォントを 読み込みます コピーしました 本当は2種類あります これを読み込む これはこれで動きます 一回保存して ブラウザでプレビューします ちゃんと読み込みができましたね ただadobe edge fontの読み込みが 少し遅れてくるので 文字がカシャカシャと動くのが ありましたけど ちゃんと読み込みができています これはこれで動くのですけど もしかするとブラウザによって webfontに対応していない という場合が考えられます その時に読む込みをしても無駄ですね そういう時にはちゃんと機能が対応してるか 調べるプロパティがあります test:というもので Modernizrのwebfontに対応しているか というのはfontfaceで調べます fontface - (ハイフン)とか入りません そしてこのテストに成功した場合は ここ プロパティがyepに変わります yepというのはyesの 砕けた言い方ですね 逆にそれがない場合に 機能がない場合に読み込みたい場合には ここがやはり砕けて nope:と書き加えればいいのですが 今回はこういったものは特にありませんので 消しておきます カンマも忘れずに消します こうするとModernizrの機能で fontfaceをブラウザが サポートしているか確かめて サポートしている時はちゃんとfontを 読み込むという形になります では確認しましょう ファイルを保存して ブラウザでプレビューします 結果が変わらなければOKということです このレッスンでは機能を確かめて Modernizrでですね その機能があることを確かめてデータを 読み込むという方法についてご紹介しました 確かめるのはtest:というプロパティで 確かめたい機能を定め それがある場合だったらyep ない場合はnopeで その読み込みファイルを指定する ということでした

CSS3によるタイポグラフィ

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

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

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

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

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