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

「Dreamweaver」から簡単にWebフォントを利用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Dreamweaver」に備わっている「Adobe Edge Web Fonts」という機能を使って「Typekit」が提供するWebフォントを簡単に利用する方法について解説致します。
講師:
04:04

字幕

このレッスンでは Dreamweaver に備わっている― Adobe Edge Web Fonts という機能を使ってタイプキットが提供する― ウエブフォントを簡単に利用する 方法について解説していきます まずはダウンロードしてきた こちらの use-typekit ― というフォルダーの中に入っている この index.html ファイルを― こちらの Dreamweaver で 開いて下さい そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう Dreamweaver にはタイプキットが 提供するウエブフォントを簡単に利用できる― Adobe Edge Web Fonts という機能が備わっています 今回はその機能を使って タイプキットが提供しているウエブフォントを― 簡単にウエブサイトに 取り込んでみたいと思います 今回はこちらの index.html ファイルのこちらの文章に対して― ウエブフォントを適用してみたいと思います まずはこちらの文章を 選択した状態にしてあげます そして こちらのプロパーティーパネルの CSS を選択した状態で― こちらのフォントのところから このセレクトボックスをクリックします すると こういった画面になりますので こちらのフォントを管理― をクリックしてあげます すると このような画面ができます ここに Adobe Edge Web Fonts と書かれていますね ここに表示されているのはタイプキットで 提供されているウエブフォントとなります 今回はこのウエブフォントの中から こちらの Aladin というフォントを― 使ってみたいと思います まずはこちらの Aladin を クリックします すると このように チェックマークが付きますので― この状態で 完了 をクリックします そして 先程と同様にこちらのフォントの セレクトボックスをクリックすると― このように表示されてきますので こちらの部分にご注目ください 先程チェックマークを入れた Aladin が追加されていますね これを選択します すると このように自動的にウエブフォントを 利用する為の埋め込みコードが挿入されます そして こちらの p タグにもこのように スタイルが設定されました これで先程の Aladin という ウエブフォントが使える状態になりました 後は分り易いようにフォントサイズを 変更してあげましょう 今回は 36 位に設定しておきましょうか この状態でこの index.html ファイルを保存します 保存はマックですと コマンドと S ― ウインドーズですと コントロールと S ― の同時押しでしたね それでは保存します 保存が完了したら こちらの index.html ファイルを― ブラウザでプレビューしてみましょう ブラウザでプレビューするにはこちらの 地球アイコンをクリックして― プレビューしたいブラウザを選択します 今回は Google Chrome を 選択します すると このように表示されてきます 見て頂いて分かるとおり― このようにこちらの文章に先程の Aladin というウエブフォントが― 適用されているのが分りますね このように Dreamweaver を 使えば 簡単にタイプキットから― ウエブフォントを取り込んでサイト上で 利用する事ができます 以上でレッスンは終了です 今回は Dreamweaver に 備わっている― Adobe Edge Web Fonts という機能を使って― タイプキットが提供するウエブフォント 簡単に利用する方法について解説致しました 以降のレッスンからは CSS3 を使って テキストレイアウトを調整する方法について― 解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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