マニュアル キャンセル

Dreamweaver での Creative Cloud ライブラリ

  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 サイトのテスト

 

Adobe Stock やその他のアドビのアプリを使用して Dreamweaver プロジェクト間でクリエイティブアセットを参照、管理、アクセスできます。

Creative Cloud ライブラリを使うと、お気に入りのアセットをどこにいても使用することができます。Creative Cloud デスクトップおよびモバイルアプリケーションで画像やカラー、テキストスタイルなどを作成またはキャプチャした後、他のデスクトップアプリケーションやモバイルアプリケーションから簡単にアクセスできるので、シームレスなクリエイティブワークフローが実現します。

Dreamweaver 内から直接 CC ライブラリにアクセスして、web ページでカラーやグラフィックを再利用できます。グラフィックを「リンクされた」アセットとして挿入して、クラウド上のグラフィックにリンクして常に最新の状態に保つこともできます。

Dreamweaver での CC ライブラリの使用について詳細をご確認ください。

CC ライブラリパネル

CC ライブラリパネル(ウィンドウ/CC ライブラリ)は、Creative Cloud に保存されたアセットへのメインアクセスポイントです。パネルでは、Adobe Stock のアセットを検索することもできます。

CC ライブラリパネル
CC ライブラリパネル

このパネルでは、次の操作を実行できます。

  • ライブラリに保存されているアセットの特定のライブラリの参照
  • ライブラリの作成
  • 選択したライブラリ内のアセットのプレビュー
  • Web ページに挿入するアセットのドラッグまたはコピー
  • キーワード(画像の完全な名前や名前の一部など)を入力して Adobe Stock で検索

作業の開始

Dreamweaver でサイトを定義

Dreamweaver のサイトは、すべての画像、ビデオ、スクリプト、スタイルシートのほか、web ページに関連するファイルが格納されるフォルダーです。サイトを事前定義すると、CC ライブラリからサイトに読み込むアセットを簡単に保存できるようになります。CC ライブラリからアセットを読み込む web ページもサイトフォルダーに保存されることを確認してください。

サイトの作成について詳しくは、ローカルバージョンのサイトの設定を参照してください。

CC Libraries にアセットを追加する

必要なアセットがすべて Creative Cloud で使用できるようになっていることを確認することで、Dreamweaver で Web ページへのアセットの読み込みを高速化できます。

画像のストックをお探しなら、Adobe Stock から始めることをお勧めします。詳しくは、Adobe Stock からのアセットの取得を参照してください。

様々なモバイルおよびデスクトップアプリケーションからキャプチャまたは作成したグラフィックやカラーは、Creative Cloud に保存し、web ページに読み込むことができます。例として、Adobe Shape CC を使って作成されたベクトルグラフィックや Photoshop で処理した画像が挙げられます。Creative Cloud では、個人ユーザーまたはグループがアセットを共有して共同作業することもできます。そのため、他のユーザーが作成したアセットを再利用することもできます。

Creative Cloud Libraries について詳しくは、Creative Cloud ライブラリを参照してください。

Adobe Stock からのアセットの取得

Adobe Stock は Creative Cloud ライブラリと緊密に統合されています。画像を検索して、任意の CC ライブラリに追加するには、次のいずれかの手順を実行します。

  • Adobe Stock web サイトから直接実行します。
  • Dreamweaver で CC ライブラリパネルを使用します。
  • Photoshop や Illustrator などの他のアドビアプリケーションで CC ライブラリパネルを使用します。

画像を CC ライブラリに追加したら、CC Libraries に保存されたグラフィックを再利用するに記載された手順に従って、これらの画像を Web ページに使用できます。

Stock 画像を購入するかどうかすぐにわからない場合は、透かしの入った Stock 画像(プレビュー)をライブラリに追加し、これらの画像を代替として使用できます。画像を購入する準備ができたら、Dreamweaver や他のアプリの CC ライブラリパネルで、または Adobe Stock web サイトから直接購入できます。 

CC ライブラリパネルを使用して Adobe Stock の画像を検索する
CC ライブラリパネルを使用して Adobe Stock の画像を検索する

画像をライセンス認証すると、開かれているドキュメント内の透かしの入ったアセットのすべてのインスタンスがライセンス認証された画像の高解像度バージョンに更新されます。

CC ライブラリに保存されたカラーとカラーテーマを再利用する

ライブビューでカラーとカラーテーマを再利用する

カラーやカラーテーマは、Illustrator、Photoshop、Adobe Color CC などのアプリから Creative Cloud ライブラリに保存できます。Dreamweaver で CC ライブラリパネルを使用して Web ページにこれらのカラーやカラーテーマを読み込むには、次の手順を実行します。

  1. CC ライブラリパネルで、次のいずれの操作を実行します。

    • 必要なカラーまたはカラーテーマをクリックします。カラーまたはカラーテーマの 16 進数値がクリップボードにコピーされます。
    • 必要なカラーまたはカラーテーマを右クリックしてから、「RGB 値をコピー」または「16 進数値をコピー」をクリックします。 
  2. コードビューまたは CSS デザイナーにカラーの値をペーストします。

コードビューでカラーを再利用する

Creative Cloud に保存したカラーは、コードビューのコードヒントして使用できます。コードビューでのコーディング中に、コードヒントから必要なカラーを選択できます。コードヒントのカラーの横の Creative Cloud アイコンに、これらのカラーが Creative Cloud に格納されたことが示されます。

コードヒントに表示される Creative Cloud ライブラリのカラー
コードヒントに表示される Creative Cloud ライブラリのカラー

コードヒントでは、CC ライブラリパネルに現在開いているライブラリからカラーを選択できます。上のイメージでは、「マイライブラリ」のカラーがコードヒントとして使用できるようになっています。他の Creative Cloud ライブラリのカラーをコードヒントとして取得するには、CC Libraries パネルで目的のライブラリを開いて、コードビューで作業を開始します。

CC ライブラリに保存されたグラフィックを再利用する

Dreamweaver は、2021 年 11 月 16 日より、Illustrator アセットから SVG を抽出する機能を廃止しました。この回避策を使用して、画像形式オプションを有効にし、Illustrator(.ai)アセットを PNG 32/PNG 24/PNG 8/JPEG 形式に変換することを推奨します。また、ユーザーは Illustrator アプリから Illustrator アセットを SVG 形式にエクスポートすることもできます。

アドビのデスクトップおよびモバイルアプリケーション(Photoshop、Illustrator、Adobe Shape CC、Adobe Sketch CC など)を使用して作成したグラフィックを Creative Cloud Libraries に保存できます。CC ライブラリパネルを使うと、グラフィックをライブビューに簡単に挿入でき、コードヒントを使うと、簡単にグラフィックをコードに直接挿入できます。

CC ライブラリからグラフィックを以下として挿入できます。

  • リンクされたアセット:グラフィックがリンクされたアセットとして挿入されると、ライブビューでアセットの右下隅に小さなクラウドアイコンが表示されます。このアイコンは、アセットがクラウド上の元のアセットにリンクされていることを示します。また、クラウドアイコンがアセットパネル内のアセットの横に表示されます。
  • リンク解除されたアセット:アセットを Web ページにローカルコピーとして挿入できます。ライブビューで、CC ライブラリパネルの目的のアセットを右クリックし、「リンク解除されたグラフィックとして挿入」を選択します。グラフィックのコピーを挿入すると、クラウド上の元のアセットとのリンクが解除された状態でアセットがローカルコンピューターにコピーされます。クラウドのアセットに行った変更または更新は、Dreamweaver に反映されません。

アセットを一括ダウンロードして、コンピューターに保存して後で使用することもできます。

ライブビューでグラフィックを再利用する

  1. 次のいずれかの操作を実行します。

    1. グラフィックを CC Libraries パネルからライブビューのページにドラッグします。

      注意:グラフィックを CC ライブラリパネルからライブビューにドラッグすると、グラフィックは「リンクされた」グラフィックとして挿入されます(サイトを定義済みの場合)。

      Illustrator ファイルは、デフォルトで web 用に最適化された SVGファイルとして挿入されます。SVG ファイルのプロパティをカスタマイズする場合は、options.json ファイルの環境設定を編集できます。詳しくは、CC ライブラリから Web 用に最適化された SVG ファイルを抽出するを参照してください。

    2. CC ライブラリパネルで目的のアセットを右クリックして、以下を選択します。

      • 「リンクされたグラフィックとして挿入」。グラフィックをリンクされたアセットとして挿入します。これにより、そのアセットでクラウド上の対応するアセットへの参照が維持されます。クラウドのアセットに変更を加えると、Dreamweaver のリンクされたアセットにもそれが反映されます。
      • 「リンク解除されたグラフィックとして挿入」。グラフィックをリンク解除されたアセットとして挿入します。
  2. 表示されたサンプルダイアログボックスで、画像のファイル名と寸法を指定します。詳しくは、グラフィックのサンプリングオプションを指定するを参照してください。

コードビューでグラフィックを再利用する

Creative Cloud ライブラリに保存したグラフィックは、コードビューのコードヒントして使用できます。最初に、CC ライブラリパネルで目的のライブラリを選択して開きます。次に、コードビューに切り替えて、コーディング中に、コードヒントから必要なグラフィックを選択します。コードヒントのグラフィックの横の Creative Cloud アイコンに、グラフィックが Creative Cloud に格納されたことが示されます。

コードヒントとして表示される CC ライブラリのグラフィック
コードヒントとして表示される CC ライブラリのグラフィック

注意:コードヒントを使ってグラフィックを挿入した場合、グラフィックは「リンク解除された」グラフィックとして挿入されます。

他の Creative Cloud ライブラリのカラーをコードヒントとして取得するには、CC Libraries パネルで目的のライブラリを開いて、コードビューで作業を開始します。

グラフィックのサンプリングオプションを指定する

「高さ」および「幅」ボックスは Dreamweaver の画像最適化エンジンを使用してアセットをリサンプリングします。また、アセットをどの形式の種類で配置するかを指定することもできます。クラウドアイコンが有効化され、アセットがリンクされたアセットとして配置されることを知らせます。ファイル名とサンプリングオプションを指定したら、Enter キーを押してアセットを挿入します。

画像のリサンプリング
画像のリサンプリング

注意:

  • SVG オプションは Illustrator(.ai)ファイルにのみ使用でき、これらのファイルに対してデフォルトとして設定されます。これらのファイルの形式を JPEG に変更するには、リサンプリングダイアログボックスのドロップダウンリストを使用します。
  • JPEG ファイルは JPEG ファイルとしてのみ挿入でき、これ以外の形式オプションはこれらのファイルには使用できません。

グラフィックの編集

CC ライブラリパネルを使用すると、ネイティブアプリケーションで InDesign や Illustrator のアセットを簡単に開いて編集することができます。これを行うには、CC ライブラリパネルでアセットを右クリックし、「編集」をクリックします。

ネイティブアプリケーション(InDesign または Illustrator)が、使用する Dreamweaver インスタンスと同じコンピューターにインストールされていることを確認してください。また、Creative Cloud からこれらのアプリケーションに対する最新のアップデートをインストールしていることを確認してください。

リンクされたグラフィックのリンク解除、リサンプリング、名前変更

名前やサイズを変更したり、CC ライブラリから Web ページに読み込まれる画像をリサンプリングするには、次のいずれかのオプションを使用します。

  • ライブビューでアセットをクリックし、クラウドアイコンをクリックします。 
  • アセットを右クリックして、「リンクされたアセット」オプションをクリックします。
  • アセットパネル内のアセット名の横にあるクラウドアイコンをダブルクリックします。

表示されるリサンプリングダイアログボックスで、目的のプロパティを変更できます。CC ライブラリのソースへのアセットのリンクを解除するには、リサンプリングダイアログボックスのクラウドアイコンをクリックします。

アセットのリンクを解除すると、Creative Cloud 上のソースファイルに対して変更を行っても Web ページの画像には反映されません。

グラフィックのダウンロード

目的のグラフィックをリンクされたアセットとして CC ライブラリからまとめてダウンロードし、後でプロジェクトに挿入できます。これらのアセットをプロジェクトで使用した場合、対応するライブラリ項目へのリンクも維持されます。 

  • リンクされたアセット:グラフィックをリンクされたアセットとしてダウンロードするには、CC ライブラリライブラリパネルでアセットを右クリックし、「リンクされたアセットをダウンロード」を選択します。ファイル名とリサンプリングオプションを指定するためのポップアップが表示されます。ファイル名とサンプリングオプションを指定してアセットをサイトフォルダーに保存し、Enter キーを押します。
  • リンク解除されたアセット:グラフィックをリンク解除されたアセットとしてダウンロードするには、CC ライブラリパネルで目的のアセットを右クリックし、「コピーをダウンロード」を選択します。ファイル名とリサンプリングオプションを指定するためのポップアップが表示されます。ファイル名とサンプリングオプションを指定してアセットをサイトフォルダーに保存し、Enter キーを押します。
アドビのロゴ

アカウントにログイン