マニュアル キャンセル

Dreamweaver でのフォントの組み合わせの追加と変更

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト
  19. トラブルシューティング
    1. 修正された問題
    2. 既知の問題

 

 

フォントを管理ダイアログボックスを使用して、Dreamweaver でフォントの組み合わせを追加および変更します。

注意:

2022 年 7 月 1 日より、Dreamweaver 21.2 以前のバージョンでは、Adobe Edge Web Fonts フォントが使用できなくなります。Web サイトで Edge Web Fonts を使用している場合は、Adobe Fonts やその他の優先フォントを使用して変更できます。

フォントリストにより、ブラウザーでの web ページのテキストの表示方法を指定します。ブラウザーでは、フォントリストのうち、ユーザーのシステムにインストールされている最初のフォントが使用されます。リストにあるフォントがいずれもインストールされていない場合は、ブラウザーの環境設定の指定に基づいてテキストが表示されます。

フォントリストへの Adobe Edge Web Fonts の追加

Adobe Edge Web Fonts を web ページで使用できます。Edge フォントをページで使用する場合、JavaScript ファイルを参照する追加のスクリプトタグが追加されます。このファイルにより、Creative Cloud サーバーからブラウザーのキャッシュにフォントが直接ダウンロードされます。

ユーザーのコンピューターでフォントが使用可能であっても、ページの表示時には Creative Cloud サーバーからフォントがダウンロードされます。

たとえば、フォント「Abel」だけを使用するスクリプトタグの形式は、次のようになります。

<!--次のスクリプトタグは、web ページ内で使用するフォントを Adobe Edge Web Fonts サーバーからダウンロードします。これは変更しないことをお勧めします。-->

<script>var adobewebfontsappname ="dreamweaver"</script>

<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>

  1. ツール/フォントを管理を選択します。

    フォントリストに追加できるすべての Adobe Edge Web Fonts が「Adobe Edge Web Fonts」タブに表示されます。

  2. このリストからフォントを検索し、フォントリストに追加するには、以下の手順を実行します。

    • フォントリストに追加するフォントをクリックします。
    • 選択を解除するには、フォントをもう一度クリックします。
    • フィルターを使用して、優先するフォントを絞り込みます。たとえば、セリフタイプのフォントに絞り込むには、 をクリックします。
    • フィルターは複数使用できます。たとえば、段落に使用できるセリフタイプのフォントに絞り込むには、 をクリックします。
    • フォントの名前で検索するには、検索ボックスに名前を入力します。
  3. 選択したフォントを抽出するには、 をクリックします。

  4. 終了」をクリックします。

任意の場所でフォントリストを開きます。たとえば、プロパティパネルの「CSS」セクションでフォントリストを使用できます。

フォントリストでは、Dreamweaver のフォントスタックが web フォントよりも先に表示されます。リストを下にスクロールして、選択したフォントを探します。

ローカル web フォントのフォントリストへの追加

コンピューター内の Web フォントを Dreamweaver のフォントリストに追加できます。追加したフォントは Dreamweaver のすべてのフォントメニューに表示されます。EOT、WOFF、TTF、SVG タイプのフォントがサポートされています。

  1. ツール/フォントを管理を選択します。

  2. フォントを管理ダイアログで、「ローカル web フォント」を選択します。

  3. 追加するフォントタイプに対応する「参照」ボタンをクリックします。たとえば、EOT 形式のフォントの場合は、EOT フォントに対応する「参照」ボタンをクリックします。

  4. コンピューター内のフォントの格納場所に移動します。ファイルを選択して開きます。この場所にフォントの他の形式がある場合は、それらも自動的にダイアログに追加されます。フォント名もフォントの名前から自動的に取得されます。

  5. Web サイトでの使用のためにフォントのライセンスが供与されていることの確認を求めるオプションを選択します。

  6. 「完了」をクリックします。

    現在のローカル web フォントのリストに、フォントのリストが表示されます。

フォントリストから web フォントを削除するには、現在のローカルフォントのリストでフォントを選択し、「削除」をクリックします。

カスタムフォントスタックの作成

フォントスタックとは、CSS font-family 宣言内のフォントのリストです。

  1. ツール/フォントを管理を選択し、「カスタムフォントスタック」を選択します。

    フォントリストの修正
    フォントリストの修正

  2. ダイアログボックス上部のリストから、 フォントリストを選びます。

    選択したフォントリストに含まれるフォントが、ダイアログボックスの左側の選択されたフォントリストに表示されます。その右のリストには、システムにインストールされているフォントがすべて表示されます。

  3. 次のいずれかの操作を実行します。
    • フォントリストのフォントを追加または削除するには、 選択されたフォントリストと選択可能なフォントリストの間にある矢印ボタン(「<<」または「>>」)を クリックします。

    • フォントリストを追加または削除するには、ダイアログボックスの上部にある 「+」ボタンまたは「-」ボタンをクリックします。

    • システムにインストールされていないフォントを追加するには、 選択可能なフォントリストの下のテキストフィールドにフォント名を入力してから、 「<<」ボタンをクリックしてそのフォントをフォントリストに追加します。システムに インストールされていないフォントを追加する機能は、 Macintosh でページを作成しているときに Windows 固有のフォントを 指定する場合などに用できます。

    • フォントリスト内を上下に移動するには、 ダイアログボックスの上にある矢印ボタンをクリックします。

新しいフォントリストの追加

  1. ツール/フォントを管理を選択します。

  2. 選択可能なフォントリストからフォントを選択し、 「<<」ボタンをクリックしてそのフォントを選択されたフォントリストに追加します。
  3. 手順 2 を繰り返して、フォントを 1 つずつリストに追加します。

    システムにインストールされていないフォントを追加するには、 選択可能なフォントリストの下のテキストフィールドにフォント名を入力してから、 「<<」ボタンをクリックしてそのフォントをフォントリストに追加します。システムに インストールされていないフォントを追加する機能は、 Macintosh でページを作成しているときに Windows 固有のフォントを 指定する場合などに用できます。

  4. フォントの選択を終了したら、選択可能なフォントメニューで 一般的なフォントファミリーを選択し、「<<」ボタンをクリックして、 選択されたフォントリストに 移動します。

    一般的なフォントファミリーには、 cursive、fantasy、monospace、sans-serif、serif があります。選択されたフォントリストのフォントが いずれもシステムにインストールされていない場合は、 テキストは一般的なフォントファミリーに対応付けられた初期設定のフォントで表示されます。例えば、大半のシステムでは、 初期設定の monospace フォントには Courier が使用されます。

挿入したフォントのプレビュー

Edge フォントと web フォントはデザインビューでプレビューできません。プレビューするには、ライブビューに切り替えるか、ブラウザーでページをプレビューします。

複数ファイルにわたる web フォントのスクリプトタグの更新

複数の HTML ファイルにリンクしている CSS ファイルでフォントを更新すると、関連する HTML ファイル内のスクリプトタグを更新するように求められます。「更新」をクリックすると、関連するすべての HTML ファイル内のスクリプトタグが更新されます。

ページ上の web フォントのスクリプトタグの更新

スクリプトタグに反映されない web ページ上の web フォントを更新するには、ツール/web フォントのスクリプトタグのクリーンアップ(現在のページ)を選択します。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト