イトウ先生のTipsnoteDreamweaver CS6・Webfonts

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 10月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 Dreamweaver CS6の新機能:その5 〜 Webfontsの使い方 〜 】 

今週はDreamweaverCS6(以下DWCS6)の新機能から、Web Fontの利用に関する機能をご紹介します。
DWCS6では、Adobe Edge Web Fonts(Google Web Fonts)と、ローカルにダウンロードしたWebfontを使用することが可能になりました。なお、今回のブログでご紹介するWebFontsは、欧文のみご紹介いたしますが、和文のWebfontsは、リューミン、新ゴ、じゅんなどでおなじみ、モリサワ・TypeSquareというサイトにて提供・販売しています。なおモリサワWebFontsは2013年12月31日まで無料で使えるキャンペーンをしているようですので、和文のモリサワのWebFontsを利用する場合には、以下のサイトを参考にしてみてください。

モリサワ・TypeSquare
http://typesquare.com/

Adobe Edge Web Fonts(Google Web Fonts)

DWCS6で予め利用できるように設定されているWebFontsに、Adobe Edge Web Fonts(Google Web Fonts)があります。これは、AdobeおよびGoogleのフォントライブラリから集められたフォントコレクションで、Web上で無償で使用することができ、フォント名がわかれば、DWCS6上から検索して探し出すことも可能になっています。
WebFontsを適用させたい文字列を選択し、修正メニュー→フォントを管理(バージョンアップ前のDreamweaverCS6の場合には、このメニューがWebFontsという名前になっています)を選択し、Adobe Edge Web Fontsタブから、お好みでフォントを選択します。フォント名がわかる場合には、同ウインドウ内で検索することも可能です。

DWCS6_Webfonts003

使用したいフォントを選択し、完了をクリックすると、以降、プロパティパネルのCSSから、そのフォント名がリストアップされるようになります。フォントの指定後、CSSを保存すればOKです。ブラウザでプレビューしてみましょう。

DWCS6_Webfonts006

DWCS6_Webfonts008

JavaScriptで読み込む

なお、このAdobe Edge Web Fontsを使用すると、scriptタグを使用してhttp://webfonts.creativecloud.com/のJavaScriptをソースに使用しているのがわかります。CSS上ではfont-family: fontdiner-swanky;とだけ記述してあります。

DWCS6_Webfonts009

ローカルWebフォント

市販のWebフォントや、無償利用が可能なWebフォント、Adobe Edge Web FontsやGoogle Web Fonts以外のWebフォントを利用する場合は、ローカルWebフォントから設定します。 まずは、Webフォントそのもののフォントデータを入手しなければいけませんが、参考までに商用利用可能なフリーのWebフォントの入手先をご紹介します。

Font Squirrel
http://www.fontsquirrel.com/

DWCS6_Webfonts010

まずは、使用したいWebFontsを上記のサイト等からダウンロードしてきます。ブラウザで表示可能なWebフォントは、Truetype、WOFF、Embedded Opentype(EOT)、SVG Fontなどがありますが、ここで紹介した4フォーマットのうち、TrueType以外のフォントは表示可能なブラウザを選ぶため、無難にTruetypeを使用するといいでしょう。
ローカルにダウンロードしたフォントを選択し、ライセンス供与にチェック後、追加をクリックすると、ローカルWebフォントリストにリストされます。

DWCS6_Webfonts012

以降は、Adobe Edge Web Fontsと同様にプロパティパネルのCSSから、そのフォント名がリストアップされるようになります。フォントの指定後、CSSを保存すればOKです。ブラウザでプレビューしてみましょう。

DWCS6_Webfonts014

DWCS6_Webfonts015

なお、ローカルWebフォントの場合、まず、新規で別のCSSを作成し、@font-face規則でfont-family、src、formatを指定し、そのCSSを既存のCSSに@import規則で取り込む形で使用します。ローカルルートフォルダ内には、webfontsという名前でフォルダを作成し、必要なCSSやフォントファイルを自動的に作成・収集します。

DWCS6_Webfonts018

DWCS6_Webfonts016

有償でのWebフォントは、フォントのライセンスが不透明であるため使わない方がよい、というような風潮があるかもしれませんが、Adobe Edge Web FontsやGoogle Web Fontsは無償ですので、サイトのデザインを損なわない程度にぜひ試してみてください。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |