WebデザイナーのためのCSS3実践講座

「Google Fonts」のご紹介と使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webフォントホスティングサービスの1つで、Googleが提供している「Google Fonts」のご紹介と、使い方について解説致します。
講師:
07:27

字幕

このレッスンでは ウエブフォントの ホスティングサービスの一つで― Google が提供している Google Fonts のご紹介と 使い方について― 解説していきます まずは ダウンロードしてきた こちらの google‐fonts ― というフォルダーの中に入っているこちらの index.html ファイルと― style.css ファイルを エディッターで開いて下さい そして これがそれらのファイルを 開いた状態です これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう それでは まず Google Fonts のサイトを― ブラウザで開いてみましょう これが Google Fonts の サイトとなっています こちらのウエブサイトでは Google が 無料でウエブフォントの提供を行っています このサイトで自分が使いたいフォントを 探して設定を行っていくだけで― 自分のサイトでウエブフォントが 利用できるようになります それでは その手順をみていきたいと思います まずは今回 こちらの Open Sans というフォントを使ってみたいと思います まずはこちらの Open Sans の この枠の中にある― こちらの矢印のアイコンボタンを クリックします すると このような画面になります この画面でウエブフォントを 利用する為の設定を行ってきます まずはこちらの一番の部分 こちらの一番の部分でこのフォントの中に 含まれる書体の中から自分が使いたい物を― 選択することができます 今回は Normal 400 を使いたいと 思いますので ― このままのデフォルトの状態にしておきます そして 次に この下にあるこの二番の部分― この二番の部分でキャラクターセットを 選択することができます この部分もデフォルトの状態としておきます ここまでで基本的な設定は完了です 次に こちらの三番目の部分ですね こちらの三番目の部分では この Open Sans というフォントを― サイト上で利用する為のリンクタグが 生成されていますので こちらをコピーします そして エディッターに戻ります エディッターに戻ったら こちらの index.html の― ヘッドタグの中に先程コピーした リンクタグを貼り付けます この部分がそれを貼り付けた 状態となっています このように貼り付けたら 再度 Google Fonts のサイトに戻ります そうしたら 次に この下にある四番目 こちらの部分では 実際に取り込んだ ウエブフォントを利用する為の― フォントファミリープロパーティーの 記述が書かれています こちらも同様にこの部分をコピーします そして 実際にサイト上でこのフォントを 利用したいスタイルシートの中に― このフォントファミリーの一文を ペーストしてあげます それでは エディットに戻ります エディッターに戻ったら こちらの style.css の方をクリックして― 開いて そして 今回はこちらの p クラス スタイル a の部分に― このように貼り付けておきます これでこの Open Sans という ウエブフォントの取り込みが完了しました それでは 実際にこちらの index.html ファイルを― ブラウザで開いてその表示を 確認してみたいと思います これがその index.html ファイルを ブラウザで開いた状態です こちらの部分が先程取り込んだ Open Sans というウエブフォンツで― 表示している一文となります このようにフォントが取り込まれて 反映されているのが分りますね それでは次に 一つのウエブサイト上で 複数のウエブフォンツを使いたい場合― どのようにすれば良いのか その手順をみていきたいと思います それでは Google Fonts の サイトに移動します そして 今回は Oswald と Lobster というフォントを― 同時に複数利用してみたいと思います まず Oswald のフォントが この部分にありますね フォントを複数 同時に利用したい場合は こちらのフォントの枠の中にある― この Add to Collection というボタンをクリックします このようにクリックすると こちらに コレクションという形で Oswald が― 表示されていますね それでは 同様にもう一つのフォント Lobster をこのコレクションに― 追加してみたいと思います こちらに検索ボックスがあるので この部分に Lobster と― 入力してあげます すると このように検索結果が出てきますので この Lobster のフォントのこの― Add というコレクションボタンを 同様にクリックしてあげます すると こちらにも Lobster が 追加されていますね このように追加されたら こちらの Use ボタンをクリックしてあげます すると 先程と同様に こちらの画面に移ってきます ここまで来たら 後の設定は先程と同様です まずは こちらの部分で 使いたい書式を選択します そして こちらの部分で使いたい キャラクターセットを選択します ここまで設定できたら こちらの三番の部分で Lobster と― Oswald のフォントを取り組む為の リンクタグが表示されていますので こちらをコピーして index.html ファイルにペーストします そして 最後にこちらの四番で Lobster と Oswald を― 実際に利用する為のフォントファミリーの プロパーティーが表示されていますので― それぞれコピーして CSS ファイルの中に記述してあげます それでは エディットに戻ります まずはこちらの index.html ファイルの方にはこちらの p タグと― こちらの p タグそれぞれに Oswald と Lobster を― 設定してあげたいと思います まず このヘッドタグの中にこの Lobster と Oswald が― 同時に取り込まれている このリンクタグをペーストしていますね そして こちらの style.css の方をみてみましょう こちらの部分でも同様に p クラス スタイル b と p クラス― スタイル c にそれぞれフォントファミリー 先程コピーしてきたものですね これをペーストしてあげています こうすることで二つのウエブフォンツを 同時に利用できる状態となりました それでは こちらの index.html ファイルを― ブラウザで開いて その表示を確認してみたいと思います こちらがこの index.html ファイルを― ブラウザで開いた状態ですね こちらの真ん中の文章は Oswald が 適用された状態 そして こちらの最後の文章には Lobster というフォントが― 適用された状態になっているのが分ります 以上が Google Fonts の 基本的な使い方となります 基本的に使いたいフォントを選んで そして 生成されたタグを― コピーアンドペーストするだけで 利用できるようになるので― 気軽に利用できるのは嬉しいですね 以上でレッスンは終了です 今回はウエブフォントの ホスティングサービスの一つで― Google が提供している Google Fonts のご紹介と― その使い方について解説致しました 以降のレッスンでは この Google Fonts の― フォントファイルをダウンロードして 自分のサーバーに設置して― 利用する方法について解説していきますので そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

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

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

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

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