jQuery APIでWebサイトを演出しよう

Google Font APIでWEBフォントを使おう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
WebフォントとはCSS3で実装された機能ですが、Googleが提供するGoogle Fontsを使うことで、簡単に導入することができます。CSSと併用して、使ってみましょう!
講師:
07:55

字幕

このレッスンではGoogle が提供しているWeb フォントを使用してみましょう。それではまず begin とfinal のファイルを見比べてみましょう。まず webfont_beginというフォルダーに入っているindex.html をGoogle Chrome で開きます。そしてフォルダーに切り替えてfinal のフォルダーの中に入っているindex.html もGoogle Chrome で開きましょう。そして少しスクロールをしますと、News & Topics という書体に注目してください。begin の方のファイルを見るとこのようにブラウザーの基本的なデフォルトのフォントで表示されていますがfinal の方は少し洗練されたフォントになっています。また、この企業情報やサービスの下にある英語の方も標準ではなくて、実はネット上からフォントを使って表示をさせています。この Web フォントを使うと閲覧している方に特定のフォントが入っていなくてもインターネット上からフォントをダウンロードしてきてもらえるので非常に柔軟にデザインを変更することが可能です。では実装方法を見ていきましょう。 フォルダーの方に切り替えてbegin のフォルダーをフォルダーごと Sublime Text で開いていきます。そして index.html をダブルクリックで開いておきましょう。開いたらまず Google からフォントを使わせてもらうというソースをコピーしてきます。ですので一度 Chrome を表示して検索のタブを開いてそこに google font という風に入力をして検索をしてみましょう。検索すると、Google Fonts というサイトが上がってくるのでこちらをクリックして見てみましょう。クリックすると、このようにフォントが現れます。現在は632フォントあるらしいですね。そして Category で絞り込むことができます。例えば明朝系、所謂 Serif のあるフォントはチェックを Serif だけにすればこのような少し格式の高いフォントが出ますしSerif を切ってHandwriting にチェックを入れれば所謂スクリプト書体という手書き風の書体を使うことも可能です。今回はサイトのテイストに合わせてSans Serif という幾何学的な書体の方を選んでいきたいと思います。そして検索窓があるのでここに絞り込みをして行きたいと思います。 ここに path と書きました。そうすると少し横が細い、横幅が狭まっているようなフォント。Pathway というフォントが出てきたのでこちらを使いたいと思います。こちらが絞り込まれたら矢印のボタンをクリックしましょう。これは Quick Use のボタンです。そしてスクロールをすると、ここに Add this code というものが書いてあるのでこちらをコピーします。コピーをして、そしてSublime Text に戻りましょう。そしてフォントは css で読み込まれますのでこの favicon のリンクの上に改行を取ってここにペーストをしましょう。URL を見るとfonts.googleapis.comそしてフォント名がこちらに書いてあります。これでフォントを使う準備ができましたが後はこのフォントを呼び出すコードをスタイルシートに書いていきます。では一度この index.html を保存しておきましょう。そして css フォルダーの中のstyle.css をダブルクリックで開きます。そうしたらフォントを適用させたい場所まで下りていきましょう。まずはコンテンツの企業情報の下などにある補足の欄ですね。 そちらを探していきます。それは207行目の id content のsmall というタグの所にweb font とコメントが書いてあるかと思います。そしてここにどのように書けばいいかは実はサイトの方に説明が書いてあるのでChrome にまた切り替えて、そしてStandard という所から先程コピペをしましたがちょっとスクロールをすると、ここに css をコピペするのがありますのでこちらをまずコピー、そしてSublime Text に戻ってこの web font と書いてある所の下にペーストをしましょう。要するにフォントを読み込んだらいつも通りのフォントファミリーで書体を選んであげれば実装ができるということになります。そして何かエラーがあって読み込めないときはSans SerifつまりパソコンにインストールされているSans Serif 系の書体を表示してくださいという風に書いてあります。ペーストができたらブラウザーで確認してみましょう。上書き保存をしてそしてブラウザーに切り替えてbegin のファイルになっていることを確認して更新をしてみましょう。更新をするとこの企業情報の下の注釈部分がスタイリッシュなフォントに変わりましたが少し小さいフォントサイズになってしまったようなのでSublime Text に戻ってfont-size を 12 から16 位に引き上げてあげたいと思います。 上書き保存をしてブラウザーに切り替えて更新を押します。そうすると少しちょうどいいような感じになったかと思います。今度はこちらもフォントを適用していきます。Sublime Text に戻ってこの見出しのエリアは #news のh4 というエリアになるのでこちらの Web フォントのfont-family 部分をコピーしてそして web font の下にペーストをしてあげます。これはあくまでも目印のためのコメントなのでこれは必須ではありません。では上書き保存をしてGoogle Chrome に切り替えて更新を押してみましょう。このようにフォントが変わりました。このように Google のフォント API を使っていけば様々な英字フォントを使うことができます。残念ながら日本語対応のフォントは無いので、英語で使われている所は積極的に使われるといいと思います。また、半角英数、数字の方にも対応してますので例えば電話番号だけ Web フォントで表示するといった使い方も可能です。このレッスンでは Google API のフォントについて学びました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

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

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

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

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