CSS3のアニメーションテクニック

Webフォントを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google FontsのMonotonフォントを、サイトからlink要素で読込んで使います。
講師:
03:52

字幕

このレッスンでは web font を読み込んで使います Google Fonts の Monoton と言う font です この font を ダウンロードするのではなく サイトからリンクして使う事にします Dreamweaver で開いたのは まだ web font の 設定をしていない html ドキュメントです 英文 font ですので 名前を英字で書いてあります 後はごく基本的な設定 背景色であるとか font の サイズや 位置決め font の色 あるいはスペースなどの 基本的な設定だけがされています 現在の状況を確認しましょう ファイルから ブラウザープレビューで確認します 黒い背景に 白い文字が ただ打ってあるだけと 言う状態です では web font の読み込み方です Google で検索するのが速いでしょう font 名は分かっていますので monoton として Google Font ですので Google ぐらいまで入れると もうすでに 出てますね この一番上です 一応 enter キーを押しまして 一番上の Google Fonts Monoton を選択します このような font になります 下までスクロールして行くと もうちょっと 様々な文字が 確認できます そして Open Monoton in Google Fonts とありますので こちらをクリックします すぐに終わるよ と もう出てますね そして 下の設定を確認して コピーすればいいですと コードをコピーすればいいと 言う風に書いてあります ですから 下の方スクロールして行きましょう この設定ですね えー こちらをコピーすればいいと 言う事です それから  font の設定の仕方の例も出ていますので そちらも確認します ここですね font family を monoton cursive と 言う設定にすればいいと言う事です ま これはすぐにタイプできますので こちらをコピーしておきましょう そして Dreamweaver に戻ります コピーしておいたリンク要素を style 要素の上でいいでしょうか ここにペーストします リンク要素で サイトからの font のダウンロード先ですね それから rel 属性 type 属性を このように設定します 後は font の設定をするだけですね こちらに font family 先ほど確認した あのサイトにある 情報の通り入力して行きます font 名は Monoton そして cursive ですね これで保存をして確認します ファイルメニューから保存で ブラウザーでプレビューします これでもう  monoton の font が設定されました このレッスンでは Google Fonts の Monoton font の html ドキュメントというのを 読み込み方と 使い方をご紹介しました この monoton font のページから Open Monoton in Google Fonts と 言うページに飛びます そして スクロールをして行って コピーしなさいと言うコード これをコピーして その下にある 設定方法に従って 設定をすればいいと 言う事でした

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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