CSS3によるタイポグラフィ

Lettering.jsのダウンロードと設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストを細かく扱えるjQueryプラグインLettering.jsのダウンロードと設定の仕方をご紹介します。
講師:
04:49

字幕

このレッスンではテキストを 文字単位などに細かく分けて スタイルの設定をしたり Java Script で扱うための jQuery のプラグイン Lettering.js というツールの ダウンロードと設定の仕方 についてご説明します Lettering.js というのは サイト名が letteringjs 「. 」なしです そして「.com」 letteringjs.com というところでダウンロードします 「Download」のボタンがありますので GitHub なんですけれども こちらに移りましょう そして GitHub で 「Download ZIP」ということで .zip ファイルがダウンロード出来ます zip ファイルが解凍されると Lettering.js-master というフォルダが出来上がります この中の jquery.lettering.js こちらです これをコピーして 適切なフォルダにペーストしてください このレッスンでは 「lib(リブ)」という 空っぽのフォルダが用意されていて ここに Java Script のライブラリを 入れるという想定になっています ここに項目をペーストします Dreamweaver CC でまっさらな HTMLドキュメントを開きました ここに先ほどの lettering.js を 読み込んでみたいと思います 読み込みは「script」タブですね そして「ソース」です 「参照」のボタンをクリックして 先ほど保存したlibのフォルダの中の jquery.lettering.js― ―がありますので これを開いてタブを閉じます これで lettering.js の読み込みが出来ました けれどもこれは jQuery のプラグインですから jQuery をやはり読み込む必要もあります そちらもご紹介しておきましょう jQuery のサイトは jquery.com です 覚えやすいですね 「Download」 のボタンがありますので こちらからダウンロードします バージョンについては バージョン1とバージョン2があるんですけども もちろん2の方が機能的には多いんですが 古いブラウザへの対応ということから まだバージョン1を使うユーザーが 圧倒的だと思います このレッスンでもバージョン1を 使うことにします ではクリックをして ダウンロードページに行きます そしてやはりダウンロードしてローカルに その Java Script の ライブラリファイルを置いてもいいんですが CDN/コンテンツデリバリーネットワーク を使えば わざわざローカルやサーバーに コピーをする必要がありません ですので こちらを使うことにしたいと思います PDN のこれをコピーすればいいですよと 書いてありますので これをコピーします そして Dreamweaver に戻って ペーストをすると これで一応 結構なんですが このタイプですと ローカルで テストをする時に上手くいきません ちゃんとサーバーにあげればいいんですけれども ローカルでは動かないので 実はローカルで動く方法がありますので そちらもご説明します jQuery の CDN の項目の少し下の方に その他の CDN other CDNs という項目があります そこで Google の CDN を紹介しています こちらを使うとローカルでもテストが出来ます こちらもこの script 要素をコピーすれば いいですよと書いてあるので このままコピーしまして Dreamweaver に戻りペーストします そしてこちらを先ほどの ローカルではちょっと動かない という方はコメントアウトしましょう さらにもう1点注意なんですが 今コピーしたのはバージョンが 2のバージョンになっています ですからバージョンを 書き換えるということです 1.11.3これが最新ですので コピーして そしてペーストをすると もちろんこれは消してしまっても構いません これで Lettering.js を 使える環境が整いました このレッスンでは Lettering.js の ライブラリ jQuery のツールなんですが そのダウンロードと設定の仕方 についてご説明しました

CSS3によるタイポグラフィ

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

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

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

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

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