CSS3によるタイポグラフィ

Webフォントの設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Adobe Edge Web Fontsから題材に合ったWebフォントをテキストに設定します。
講師:
05:46

字幕

このレッスンでは Adobe Edge Web Fontsから この右側の参考画像の フォントに近いものを読み込んで Webフォントをこのように― こちら側は HTMLの中に 書いてある文字ですが この3つのテキストに対して フォントを設定してみたいと思います Dreamweaver CC で HTMLドキュメント開きました コードだけ見ればいいので 右側のパネルは邪魔ですから 非表示にしましょう 表示メニューから 「パネルの非表示」 この方が広く使えますね まず簡単に HTML ドキュメントの 構造を見ておくことにしましょう まだ今のところ使っていないのですが jquery のプラグイン Lettering.js これを後で使えるように読み込んであります それから Adobe Edge Web Fonts なんですけど 既に読み込みだけは済ませてあります Bebas Neue というフォントと playfair display の 2つのフォントが読み込まれています まだこの中のテキストには設定していません ではボディの方を見てみます ボディ要素ですが セクションがあって div 要素があって こちら参考画像ですね そしてその中に div 要素の中に p 要素が3つあって この3つの p 要素に対して それぞれフォントを適用したいと思います そして3つ別々のクラスが設定してあります 一番上「著者」なんですけど author ですね それから真ん中の COMPETITION というところですが これは stack というクラスがつけられています それから一番下に文字が書いてあるんですが こちらには tagline というクラスが 設定されています 今現在の状況を確認したいと思いますので ブラウザでプレビューしてみましょう フォントは全然違いますね 上のフォントと下のフォントは まあまあ近いと言えば近いかも知れませんが COMPETITION が全く違います まず順番にフォント2つを 設定してみることにします Adobe Edge Web Fonts から読み込んだ 2つのフォントのうち playfair display これを使うことにしましょう まずはこちらから設定します コピーして p 要素全体に 共通に設定したいと思います フォントファミリーですね そしてペーストします あとはもう1つ serif とします これで一旦保存して 確認してみましょう ファイルを保存して ブラウザでプレビューです ちょっと似た感じになりましたね 結構いいのではないでしょうか まあ問題はこの真ん中ですが 真ん中の方には もう1つの Web フォントを設定します もう1つの Web フォントは Bebas Neue というものですね これをコピーして こちらは COMPETITION クラスが stack でした stack はここにありますので ここに設定しましょう フォントファミリーで 今コピーしたのをペーストします Web フォントですね そしてこちらは sans-serif とします そしてセミコロン ではもう一度確認しましょう ファイルを保存して ブラウザでプレビューです とりあえずフォントは似た感じになりましたね このレッスンでは Adobe Edge Web Fonts から 右側の画像に似たフォントを選んで それを3つの p 要素に適用してみました

CSS3によるタイポグラフィ

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

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

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

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

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