CSS3によるタイポグラフィ

Google Fontsを使う

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

ぜひご覧ください。

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

字幕

このレッスンでは HTMLドキュメントで使えるWebフォント Google Fontsの使い方についてご説明します 今Dreamweaver CCで開いている HTMLドキュメントは フォントのサイズと位置揃えを ボディに対して設定してあるだけで 特にフォントの設定は他にはしてありません ただ文字の方にはH1要素なんですが 英語の方はEnglish 日本語の方はJapanese というclass名が設定してあり まだセレクタのみ書いてあります このEnglishの方に英語フォントを 設定してみたいと思います ここでGoogleフォントを使います Google FontsのURLは https://www.google.com/fonts となっています もちろんGoogleでGoogle Fonts というふうに検索すれば 一番最初に出てきます さてこの画面でまず カテゴリーが分かれています 文字のスタイルですね それから太さを調整することが出来ますし 斜体ですね 傾斜を掛けることも出来ます それから幅も調整出来ます 今回はデフォルトでいってしまいましょう それから言語の種類なんですけれども 通常はLatinでしょう 残念ながらJapaneseがないです では少し下にスクロールしてみて 面白そうなフォントを探してみます これが面白そうですね Indie Flowerとあります これを使おうかなと思ったら こちらのボタンです Quick-use すぐに使えますよ ということになっているんですが こんな字体です と そして選択肢がいくつかある 場合もあるんですが ここではノーマル400 というふうになっています 下の方にスクロールすると このフォントダウンロードしても いいんですけれども そうするとローカルあるいはサーバーに いちいちフォントを置かなければいけません リンクでサイトから呼んでしまった方が 簡単ですので それを使いたいと思います このままこのコードをコピーしてしまえば いいよということですので 一旦コピーします そしてDreamweaverの方に移りましょう 今コピーしたリンク要素ですね これをタイトルの下に ペーストしましょう ペーストです これでフォントがサイトから読み込まれます そうしたらこのEnglishのclassに フォントを設定したいと思います font-familyですね これでまた1回 Google Fontsに戻りましょう CSSの設定はこれをコピーすれば いいですよと書いてありますので そっくりもらってしまいます コピーして Dreamweaver CCの方にまた戻ります セレクタclass Englishの方に ペーストしましょう そして一旦保存します ブラウザでプレビューをしたいと思います フォントの形がたちまち変わりましたね 次は日本語のフォントを 試してみたいと思います 先ほど言語スクリプトの所には Japaneseがなかったんですが お試し用としてMore scriptsに 日本語版があります ここで検索をしましょう ちょっと長いページですので 検索でJapaneseと そうするとここにありますね Noto Sans Japanese というもので ちょっと拡大しましょう 拡大もう1回くらい 拡大します そうすると これはお試し版ということなので 色々フィードバックをしてください ということなんですが ちゃんと使えますので 使ってみたいと思います 使い方は書いてありますね これはスタイル要素の中に書きます インポートURLとありますが この中に読み込むURLが書いてありますので こちらをコピーします そしてDreamweaver CCの方に移りましょう このスタイル要素の中にペーストします そして日本語はclassが Japaneseですので このセレクタに またfont-familyの設計を加えます もう一度Googleのサイトに戻りましょう 使い方がExampleの所にありますので これをコピーしまして そしてDreamweaver CCです class Japaneseのセレクタのところに ペーストしましょう そして保存してブラウザで確認します ブラウザでプレビューです 少し出てくるのが遅いですね やはり日本語は字数が多いですし 形が複雑ですので ちょっと読み込みに 時間がかかってしまいます もう1回確認しましょうか 一旦キャッシュを空にして リロード 読み込み直します 英語はすぐ出てくるんですが 日本語はちょっと待たないと いけないということで これはやはり日本語の複雑さということが 関係してますので 仕方ないところかと思います フォントの数があまり 多くはありませんので たくさん使うということは 無いと思うんですが 重さについてはちょっと 注意した方がいいでしょう このレッスンでは HTMLドキュメントで使えるWebフォント Google Fontsの使い方について ご紹介しました

CSS3によるタイポグラフィ

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

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

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

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

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