注目機能その4:Webフォントの利用


■Webフォントの利用とは

これまで、Webフォントの利用はCSSに書き込むことで行っていたが、「Dreamweaver CS6」から、コードを書かなくてもデザインにWebフォントを適用させることができるようになった。

■Webフォントの利用方法

まず、「修正」から「Webフォント」を選択する。すると新機能のWebフォントマネージャーが開く。このダイアログボックスを利用して、Webフォントを追加する。

次に、入手したWebフォントの種類に応じてフォルダのアイコンをクリックすると、自分が入手したWebフォントのファイルを開くことができる。この機能を使う時には、入手したWebフォントが適切なライセンスに則って使用できることを確認しておく必要がある。

「修正」から「Webフォント」を選択

Webフォント追加画面

選択したフォントについては、パスとフォント名が入力される。さらに一番下のチェックボックスに適切なライセンスのもと使われるWebフォントであるという同意のもとチェックを入れる。

それでは、追加したWebフォントを実際に使用してみる。まず、Dreamweaverのデザインビュー上で使用したいフォントをクリックする。

Webフォント追加画面

Webフォントを適用したいフォントを選択

CSSのプロパティインスペクタでターゲットのルールを確認した後、フォントのリストを表示して追加したWebフォントを選択する。これによって、ターゲットルールが適用されているすべてのフォントにWebフォントを適用することができる。

追加したWebフォントが選択可能になっている

Webフォント適用後

これらの操作によって、Dreamweaverがどのような操作を行ったのかを見てみよう。右下のファイルパネルを更新して確認することができる。

生成されたWebフォントのフォルダーとファイル

webfontsというファイルの内容を確認すると、選択したWebフォントが追加され、さらに新しいスタイルシートが生成されている。

また、関連ファイルツールバーを確認すると、stylesheet.cssファイルが追加されている。ファイルを開くとフォントフェースセレクタが記述されて属性が指定されており、メインのCSSファイルにはstylesheet.cssへのパスを指定したURLの読み込みが自動的に記述される。

最後に

これまで見てきたように、「Dreamweaver CS6」には、同ソフトの「CS5.5」と比較して、格段に作業スピードを上げることができる機能が盛り込まれている。30日間無料で利用できる体験版があるので、まずはそれを利用して効果を実感してもらいたい。

内田啓太
HTML5によるWebアプリ開発を効率化するJavaScriptライブラリ「jAction」にデザイナーとして参加し、スマートフォンアプリやサイト制作に携わる。学生時代は宮城県女川町のWebブランディングやソーシャルリーディング研究など、デジタル技術を使った企画・開発に取り組んだ。Webデザイナーとしてさらなる成長を目指す。

協力：岡徳之(tadashiku, Inc.)