CSS3によるタイポグラフィ

Adobe Edge Web Fontsを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
WebフォントAdobe Edge Web Fontsの読み込み方とその使い方をご説明します。
講師:
06:41

字幕

このレッスンでは HTMLドキュメントで使えるWebフォント Adobe Edge Web Fonts (アドビ・エッジ・ウェブ・フォンツ) というのをご紹介します Adobe Edge Web Fontsは 500種類以上のフォントが用意されていて すべて無償で使うことが出来ます Dreamweaver CCで開いた HTMLドキュメントには H1要素が2つ入っています そしてそれぞれに片方はFumio もう片方はLynda というクラスが設定されています テキストはボディに対してフォントサイズと センターに位置揃えしてあるだけで セレクターのみ設定してあります それぞれに違うWebフォントを Adobe Edge Webフォントから 取ってきたいと思います Adobe Edge Webフォントは Googleで検索するのが簡単でしょう Adobe Edge Font で 大丈夫だと思います 一番上に出てきましたね こちらがそうです そしてGet Started/始めましょう ということで こちらをクリックします フォントが様々 先ほど言いました通り 500種類以上用意されていて ページでどんどん進んでいくことが出来ます このAaBbとありますが 文字は打ち変えることが出来ます 例えばfontsと それからリストの表示なんですが 1行ずつ表示する ということも可能です 並べ方は名前とスタイル 2種類から選択します あと大きさを調整したり またカテゴリーが幾つか分かれていますので こんな感じの文字が欲しいなと思ったら クリックすれば結構です クリックでオン/オフが出来ますので それから見出しに適したフォント Recommend(リコメンド)と ありますので これがお勧めですよということですね あるいは普通の文章に 使った方がいいというフォント 他にProperties(プロパティ)と ありますが 属性ですね そして言語などが選択出来ます では一端リフレッシュしましょう さてどれを使うかということですが 無精してこの1ページ目で済ませて しまいますけれども ちょっと楽しい感じの Aladin(アラジン)をクリックします するとDefault subset (デフォルト・サブセット) All characters(オール ・キャラクターズ)とあります デフォルトでいいと思います すべての文字を読み込もうとすると やはりサイズが増えてしまいます デフォルトスタイルが デフォルトでは選択されていますが 物によってはカスタムスタイルが いくつか用意されているものもあります 今回はデフォルトでいきます そしてスクリプト要素 javaスクリプトを動かす構図なんですが コピーのボタン これでコピーして HTMLドキュメントの方に ペーストすれば結構です でもここではフォントもう一つ使いたいので 一端これを閉じまして そうですね Alex Brush(アレックス・ブラシ) フォントが2つに増えました そうするとスクリプトが2つ要るんじゃないか と思うかもしれませんが これをセミコロンで どんどんつなげることが出来ます 試しにもう1つ この上のものですね 何と読むのかちょっと分かりませんけれど 3つ そうするとセミコロンで どんどんつなげて フォントが複数1つのスクリプト要素で 読みこむことが出来ます 今回は文字2つしか使わないので Remove(リムーブ)で消してしまいます そうしたらこれをHTMLドキュメントの方に スクリプト要素をコピーします コピーのボタンをクリックして Dreamweaver CC に戻ります Dreamweaver CCで今コピーした スクリプト要素を このスタイル要素の上に持っていきましょうか ペーストします そして1つずついきましょう まずクラスFumioの方からいきますが ここに先程のスタイルの設定を コピーしてペーストすればいいということです またAdobe Edge Fonts の方に切り替えます スタイルはまずfont-family Aladinから 使いたいと思います Aladinのsans-serifということで コピーのボタンがありますから コピーをしてDreamweaverに 切り替えてペーストします これでペーストですね 1回保存して ブラウザでプレビューをします さっきのアラジンのフォントと どうも見たところ違っているようですね 実は先程のままでは ローカルでは確認が出来ません 修正しましょう スクリプト要素の総数が //からスタートしています サーバーで確認するという場合には これでいいんですけれども ローカルでも確かめたいという場合には この前にhttp:を 入れなければいけません 改めて上の方のライブビューでは すでにフォントが変わっていますけれども 念のため保存して確認しましょう 保存してブラウザでプレビューです 今度はちゃんとフォントが変わりました ではLyndaの方も変えたいと思いますが こちらはfont-familyのAlex Brush こちらをコピーします そしてDreamweaverに切り替えましょう クラス Lyndaのセレクターですね ここに改行を入れてペーストします もうすでにライブビューの方は 変わっていますけれども 改めて保存をして ブラウザでプレビューをしましょう Lynda.comの方も先ほど選択した フォントに変わっています このレッスンでは無償で使えるWebフォント Adobe Edge Web Fontsについて ご紹介しました

CSS3によるタイポグラフィ

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

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

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

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

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