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

「Typekit」のご紹介と使い方

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

ぜひご覧ください。

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

字幕

このレッスンでは ウエブフォントの ホスティングサービスの一つで― Adobe が提供しているタイプキットの ご紹介と使い方について― 簡単に解説していきます 今 画面に表示されているのが タイプキットのウエブサイトとなっています こちらのウエブサイトから自分が利用したい ウエブフォントを選択して利用する事が― 可能となっています 尚 こちらのタイプキットを 利用するに当たっては ― Adobe Creative Cloud のアカウントが必要となりますので― まだ持っていない方はこちらを 予め取得しておきましょう では 実際にこちらのウエブサイトの内容を みていきたいと思います まず こちらの茶色の部分でフォントの 絞り込み検索が可能となっています 因みに ウエブフォントとして 利用できるフォントはこちらの― アイコンマークで表示されている物になります それでは こちらをクリックしてみましょう すると このように絞り込み検索が された状態となります それでは こちらのタイプキットの ウエブサイトからウエブフォントを― 利用する為の手順をみていきたいと思います まずはこちらのキットというところから 新しいキットを作成― というボタンをクリックします すると このような画面が表示されてきます キットというのはウエブサイトごとに利用する ウエブフォントのコレクションと― 考えて頂ければ 分り易いかも知れません このコレクションに対して名前と そして 利用するドメインを入力していきます ここでは テスト としておきます そして ドメインを lynda.com としておきましょうか そして この状態で 続行ボタンをクリックします すると このような画面が表示されてきます この部分にジャバスクリプトの 埋め込みコードが表示されてきますので― こちらをそのウエブフォントを利用したい html ファイルのヘッドタグの中に コピーアンドペーストします そちらが完了したら こちらの続行ボタンをクリックします すると このような画面になりますね この画面になったら こちらの 全てのフォントを参照 を― クリックしてください そうしたら 先程のこちらの画面に戻ります ここから実際に利用したいフォントを 選択していきます まず ウエブフォントとして 選択したいので先程と同じように― こちらのボタンをクリックして 絞り込み検索を行います 表示されたら この中から 自分の好きなフォントを選択していきます 今回はこちらのフォントを利用してみましょう こちらのフォントの上でクリックをします すると このような画面になります こちらの画面になったら こちらのフォントを使用― というボタンをクリックします すると このような画面になるので こちらの Web という方をクリックします すると このような画面になりますので こちらに先程作成したキットを選択します 選択すると 先程作成した テスト というキットの中に― 今回選択したフォントが登録されます ここまで進めば ウエブフォントの 使用の準備は完了です 後はこちらの 公開 ボタンをクリックします そうすると このように テストを更新しています となって― この更新が終われば 後は こちらに記載のあるクラスですね このクラスを HTML の該当するタグに 付けてあげれば 今回登録している― このフォントをウエブサイト上で 表示させる事が可能です 因みに こちらのクラスの部分ですが ここに新たに追加していく事も可能です クラスの他にも ID 等といった物も 追加する事が可能です ID を追加する場合には # を頭に付けて ID の名前を入力してあげれば OK です また こちらのキットには 一つのフォントだけではなくて― 複数のフォントも登録していく事が 可能になっています 以上がこのタイプキットを使って ウエブフォントをウエブサイト上で― 利用する為の簡単な手順となります 以上でレッスンは終了です 今回はウエブフォントの ホスティングサービスの一つで― Adobe が提供している タイプキットのご紹介と使い方について― 簡単に解説致しました 以降のレッスンでは Dreamweaver に備わっている― Adobe H Web fonts という機能を使って― このタイプキットが提供するウエブフォントを 簡単に利用する方法について― 解説致しますので そちらも合わせてご覧下さい

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

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

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

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

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

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