はじめてのCSS3アニメーション

ウェブフォントを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ウェブフォントのGoogle Fontsからフォントを選んで、HTMLドキュメントのテキストに設定します。
講師:
04:44

字幕

このレッスンでは Web Font を html ドキュメントで どのように使うのかご紹介します Google Fonts から この font 発音を辞書で引いても 載っていないんですが ナニト と言う名前でしょうか この font を使ってみたいと思います まず この Google Fonts を どのようにページに表示するか Google 検索から行ってみましょう Google の検索窓で 先ほどの名前ですね nunito font もうトップに出てきますね これをクリックすると font を 使う画面が表示されます どんな見た目になるのかと言うのは この下の 欄に 簡単なサンプルが表示されています よし これで OK と言う事であれば Open Nunito in Google Fonts と言うリンクをクリックします そうすると ここで 使う font が 種類が 三つあるんですけど 今回は 太くて派手なのを使いたいので Bold の 700 と 言うのを選びます そして  ダウンロードして使う事も出来るんですが html ドキュメントで Web で使う場合には えー リンクをして font を サイトから読み込む事ができます ですから  ダウンロードはしなくても済むんですね 実際クリックすると もし Web ページで使いたいんだったら font をダウンロードしなくてもいいよと 書いてあります 今 この Use と言う コーナーを見てるんですが そのセクションを 良く見て下さい とありますので 閉じまして 下の方スクロールします そうすると これがその リンクの要素ですね もう このまま コピーしてしまえばいいので コピーをしておきます では この Font を使う html ドキュメントを Dreamweaver で 開く事にしましょう html ドキュメントの body 要素には h1 要素で文字が打ってあります Fumio と言う私の名前なんですけど 後々 この文字一つ一つバラバラに扱おうと言う 心づもりがあるもんですから 一つ一つを span の要素で括ってありますけれども ここは 今の所気にしなくて結構です そして h1 要素 name と言う クラスが指定してあります その text の 配置や ポイントサイズ spacing などが指定されています 今現在の font の状況を見ておきましょう ファイルメニューから ブラウザーでプレビューです Fumio と言う文字がただ単に 中央に 割と大きめ に表示されます ではまた Dreamweaver に戻ります 先ほど font のリンクを コピーしておきましたので  まだ残っているはずです ペーストしましょう これで font を使う事が 出来るようになりました Font を実際に設定するには この h1 の name クラス に対して 使う font の指定をします では この後に font-family と します そして 先ほどコピーした font の名前ですね Nunito と まして sans-serif を選びます これで 一旦保存しましょう ファイルを保存したら ブラウザーで確認します ブラウザーでプレビューの Google Chrome です font の形が変わりました ちょっと ポップな感じと言うか 可愛い感じになりましたね このレッスンをまとめましょう このレッスンでは Web Font その中の Google Fonts を使って見ました Nunito と言う font で 使うには Web の場合は いちいち ダウンロードする必要がありませんでした リンクを使えばいいので リンクを持って来て Dreamweaver の方ですね その コピーした リンク要素を ペーストする そして font-family として font の名前と そのスタイル を指定すればいい と言う事です

はじめてのCSS3アニメーション

最近のブラウザではCSS3の実装が進み、JavaScriptを使わなくてもダイナミックでインタラクティブなコンテンツが作れるようになってきました。このコースではこれまでの静的なCSSの基礎を学んだ方を対象に、そのようなアニメーションをCSSでどう定めればいいのか、その書き方や考え方について解説します。

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

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

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

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