マニュアル キャンセル

Dreamweaver 内の Extract

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

 

PSD をモバイルおよびデスクトップ向け HTML ベースの web デザインにすばやく変換する方法について説明します。CSS、画像、計測値、フォント、カラー、グラデーションなどを、Photoshop から直接 Dreamweaver に抽出します。

注意:

2022 年 7 月 1 日より、Dreamweaver 21.2 以前のバージョンでは、エクストラクトパネルの機能が使用できなくなります。Adobe Photoshop を使って PSD コンポーネントからスタイル情報アセットを抽出し、Dreamweaver で再利用することができます。

Extract と Dreamweaver の統合により、web デザイナーおよびデベロッパーは、デザイン情報や web 用に最適化されたアセットをコーディング環境に直接適用/抽出できます。Extract に、PSD カンプからスタイル情報やアセットを抽出するための完全な自己完結型のソリューションが用意されているため、Photoshop と Dreamweaver 間を行ったり来たりする必要が減ります。

Dreamweaver 内の Extract パネルでは、CSS、画像、フォント、カラー、グラデーション、測定値を web ページに直接抽出できます。これらの主要な Extract の機能に加え、Dreamweaver によっても次の固有の機能が提供されます。

  • Creative Cloud 上にある、また共同作業用フォルダーで共有している PSD ファイルへの直接アクセス
  • 状況に応じたコードヒントを使用したフォント、カラー、グラデーションの簡単な定義
  • ドラッグ&ドロップを使用した PSD レイヤーからの画像タグの作成
  • ライブビュー(CSS デザイナーやエレメントディスプレイなど)にスタイルを直接ペースト

Extract での作業の開始

Dreamweaver で Extract を使用することにより、Dreamweaver 内の Extract パネルから直接 PSD ファイルにアクセスできます。Extract パネルとワークスペースについて、また Extract パネルでの PSD ファイルのロード方法について詳しくは、以下の各トピックを参照してください。

Extract パネルとワークスペース

Extract のワークスペースは、Extract を Dreamweaver とともに効果的に使用できるように設計されています。このワークスペースでは、分割されたビュー(ライブビューとコードビュー)の左側に Extract パネルが、右側に web ページが表示されます。ワークスペースは、パネルをドラッグ、ドッキング、縮小/展開して、用途に応じてカスタマイズできます。カスタマイズしたワークスペースを保存して、後で使用することもできます。

注意:

Extract パネルを閉じてしまった場合は、キーボードショートカット(Ctrl + K キー(Windows)、Command + K(Mac))を使用するか、ウィンドウ/Extract を選択してパネルを再度開くことができます。

Dreamweaver の初回起動時に、Extract パネルにワークフローを開始するためのインタラクティブなチュートリアルが表示されます。チュートリアルを切り替えるには、パネルの上部にあるドロップダウンリストを使用します。

チュートリアルが完了したら、「開始」をクリックして Dreamweaver で Extract の使用を開始できます。Extract パネルに、Creative Cloud アカウントのフォルダーおよび PSD ファイルのサムネールビューが表示されます。これらのファイルはデスクトップからアップロードまたは同期したファイルか、Creative Cloud 上の共同作業用フォルダーで共有されたファイルのいずれかです。

Creative Cloud に保存された PSD ファイルを示す Extract パネル
Creative Cloud に保存された PSD ファイルを示す Extract パネル

注意:

チュートリアルを再起動するには、パネルの右上隅にあるポップアップメニューをクリックし、「チュートリアルを起動」を選択します。

Creative Cloud への PSD ファイルのアップロード

PSD ファイルを Creative Cloud にアップロードするには、ウィンドウ/抽出の順に選択し、PSD をアップロードをクリックします。他のユーザーまたはチームが PSD カンプを開発した場合、Creative Cloud でそれらを共有できます。その後、Creative Cloud に直接ログインするか、Dreamweaver の Extract パネルを通じて、ファイルのダウンロードや、アカウントへのアップロードを実行できます。

注意:

macOS デバイスで Dreamweaver 21.2 以降のバージョンを使用している場合は、Finder ウィンドウから PSD ファイルタイプを有効にしてファイルをアップロードします。

macOS の場合
以下の手順に従って、PSD ファイルを有効にしてアップロードします。
  1. Extract パネルで PSD ファイルのアップロードをクリックします。
  2. Finder ウインドウでオプションをクリックし、表示されるドロップダウンから *.psd を選択します。
  3. PSD ファイルを選択し、開くをクリックしてファイルをアップロードします。

Extract パネルで PSD ファイルを開く

Extract パネルで目的の PSD ファイルのサムネール画像をクリックします。ファイルを開いて Creative Cloud で PSD ファイルのアップデートバージョンを使用できるようになったら、Extract パネルに PSD ファイルをリロードします。これを行うには、PSD ファイルの名前をクリックするか、右上のポップアップメニューで「PSD をリロード」をクリックします。サムネールビューに戻って、別のファイルを選択するには、パネルの左上にある Creative Cloud アイコンをクリックします。

ビューを拡大し、デザインを詳しく調べる場合、Extract パネルの上部にあるズームレベルを変更するか、Alt +/- を使用します。PSD ファイルのエレメントを表示または非表示にするには、「レイヤー」タブまたはレイヤーカンプドロップダウンリストを使用します。

これで、PSD カンプを web サイトに変換する準備が整いました。 

Extract 環境設定の設定

Extract 環境設定を使用して、抽出する画像のデフォルトのファイル形式、Extract パネルで表示されるデフォルトのフォントの単位を指定できます。

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。

  2. 「カテゴリー」リストで Extract を選択します。

  3. (オプション)抽出する画像のデフォルトの形式を変更します。

    Dreamweaver CC で抽出された画像形式
    抽出画像の形式

  4. (オプション)「デバイス向けエクストラクト」セクションで目的の解像度を選択します。これらの設定は、様々な解像度で画像を保存することを選択した場合に使用されます。

    • サフィックスの付いたバージョンを保存するには、「接尾辞」列の対応する行をクリックし、テキストを入力します。 
    • 解像度が異なる各種画像を別々の出力フォルダーに保存するには、「フォルダー」列の対応する行をクリックし、相対パスを指定します。
    デバイス向け Extract
    デバイス向け Extract

  5. (オプション)Extract の使用に関連するキャッシュされたデータを削除するには、「キャッシュを消去」をクリックします。

  6. 「適用」をクリックし、環境設定ダイアログボックスを閉じます。

  7. 変更を Extract パネルで確認するには、PSD をリロードします(ポップアップメニュー/PSD をリロード)。

    Extract パネルの「PSD をリロード」オプション
    Extract パネルの「PSD をリロード」オプション

PSD ファイルから CSS を抽出

PSD カンプ内のエレメントのすべてまたは特定の CSS プロパティをコピーし、ライブビュー内の CSS デザイナーやエレメントディスプレイ、またはコード内(CSS ソースまたは HTML ドキュメント)にスタイルを直接ペーストできます。

また、コードヒントに、PSD カンプで選択したエレメントの CSS プロパティが自動的に読み込まれます。コードを使用する場合は、これらのコードヒントを使用してコードに CSS プロパティを抽出できます。

  1. Extract パネル(ウィンドウ/Extract)で、目的の PSD ファイルをクリックします。PSD のサムネールビューが展開され、カンプをはっきりと表示できるようになります。

  2. PSD ファイルで、目的のエレメントまたはアセットをクリックします。ポップアップでエレメントの CSS プロパティのリストが表示され、プロパティを選択およびコピーするためのオプションが提供されます。選択したエレメントの幅と高さをピクセルまたは割合(%)で表示できます。

    注意:ここで%を選択すると、計測値も%で表示されます。

    Extract パネルの「CSS をコピー」オプション
    Extract パネルの「CSS をコピー」オプション

    CSS をコピーするには、コピーするプロパティを選択し、「CSS をコピー」をクリックします。 

  3. 次のいずれかの方法を使用して、ドキュメントに CSS をペーストします。

    • CSS デザイナーに CSS をペーストするには、必要なセレクターを右クリックして、「スタイルをペースト」をクリックします。
    • エレメントディスプレイで CSS をペーストするには、セレクターを右クリックし、「スタイルをペースト」をクリックします。
    • コードに CSS をペーストするには、目的の場所に挿入ポイントを置いて右クリックし、「ペースト」をクリックします。

コードヒントを使用して CSS を抽出するには、次の手順に従います。

  1. ドキュメントに関連付けられた CSS ソースを開くか、HTML ドキュメントのコードビューに切り替えます。

  2. Extract パネルで、目的の PSD ファイル、カンプ内の目的のエレメントの順にクリックします。

  3. ドキュメントで、コード内の目的の位置に挿入ポイントを置きます。 

  4. CSS プロパティ名の入力を開始すると、PSD カンプの選択したエレメントの CSS プロパティを含むコードヒントが表示されます。必要な CSS プロパティをクリックしてコードに挿入します。

    PSD ファイル内のエレメントの CSS プロパティを含むコードヒント
    PSD ファイル内のエレメントの CSS プロパティを含むコードヒント

  5. 複数の CSS プロパティを抽出するには、Extract パネルのポップアップで必要なプロパティを選択します。次に、コードヒントで「選択した以下のものを挿入」をクリックします。

    Dreamweaver CC で CSS プロパティを一括挿入
    CSS プロパティの一括挿入

PSD ファイルからのテキストのコピー

PSD カンプのテキストやコンテンツを 1 クリックで web ページ内に挿入できます。Extract パネルで PSD カンプからテキストをコピーするには、テキストエレメントを選択し、「テキストをコピー」をクリックします。テキストがクリップボードにコピーされます。次に、テキストを目的の場所にペーストします。

Extract パネルの「テキストをコピー」オプション
Extract パネルの「テキストをコピー」オプション

注意:

テキストを抽出すると、テキストに関連付けられたプロパティ(フォント、カラーなど)を抽出できるようになります。詳しくは、PSD ファイルからフォント、カラー、グラデーションを抽出を参照してください。

PSD ファイルから画像を抽出

Extract パネルから PSD カンプのレイヤーを web ページのライブビューの正確な場所に単純にドラッグできます。ライブビューのライブガイドや DOM アイコンなどのビジュアルエイドは、エレメントをドラッグして配置するのに役立ちます。エレメントをドロップする前にしばらく停止すると、DOM アイコン(</>)が表示されます。</> アイコンをマウスでポイントすると DOM 構造が表示され、構造内にエレメントをドロップできます。コードを使用する場合は、状況に応じたコードヒント使用して画像を抽出できます。コードヒントを使用すると、カラーやグラデーションを画像として抽出できます。

注意:

PSD ファイルに複数のアートボードが含まれている場合、各アートボードがレイヤーパネルにフォルダーとして表示されます。フォルダーを展開または折りたたんで、その内容を表示または非表示にできます。特定のアートボードにズームインするには、単にアートボード名をクリックします。ズームアウトするには、アートボードの外側の任意の場所をクリックして「フィットさせる」をクリックします。

抽出した画像を挿入する前に、Dreamweaver により画像名が表示されます。これは編集可能です。デフォルトでは、画像はサイトのルートフォルダーに保存されます。カスタムの場所に画像を保存する場合は、ファイル名とともにディレクトリの完全パスを含めることができます。

注意:定義されているサイトに属していないドキュメントに画像を抽出する場合、画像はドキュメントが存在するディレクトリに抽出されます。未保存のドキュメントについて、保存するかどうかを確認するメッセージが表示されます。

ローカルディスクに画像を保存し、後で web ページに呼び出すこともできます。また、レスポンシブ web サイトをデザインする場合、デバイス向けの解像度が異なる複数の画像を 1 クリックで保存できます。

  1. Extract パネルで、画像のダウンロード元の PSD ファイルをクリックします。

  2. PSD ファイルの目的の画像をクリックします。

    注意:

    PSD カンプの画像を表示または非表示にするには、Extract パネルの「レイヤー」タブおよびレイヤーカンプドロップダウンリストを使用します。画像に複数のレイヤーが含まれている場合、抽出する画像のレイヤーを個別に選択できます。

    ワークスペースの右側のコードビューで、コードヒントがポップアップしていることに注意してください。 

  3. 複数の画像をインポートするには、Shift キーまたは Command キーを押しながら、目的の画像をクリックします。選択した画像は、単一の画像として抽出されます。

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

    • 画像のクリック時に表示されるポップアップで、 をクリックします。(必要に応じて)パス、ファイル名、ファイル形式、スケール比率を指定します。次のいずれかの操作を実行します。
      • 「保存」をクリックして、1x の解像度で画像を保存します。画像をサイズ変更するには、「倍率」を選択し、スケール比率を指定します。
      • 「複数保存」をクリックし、解像度が異なる各種画像を保存します。PSD ファイルにこれらの異なるバージョンを必ずしも含める必要はありませんが、必要に応じて、Dreamweaver では抽出中に複数の解像度で画像を保存できます。

    必要な解像度バージョンや対応する出力フォルダーは、環境設定で指定できます。

    アセットを抽出アイコンを使用した画像の抽出
    アセットを抽出アイコンを使用した画像の抽出

    • ドキュメントのライブビューに画像をドラッグします。画像の配置に役立つライブガイドが、ライブビューに表示されます。

    画像をドロップすると、Dreamweaver により画像の名前が表示されます。画像名のほか、拡張子も編集できます。Enter キーを押して画像を保存します。画像はデフォルトでサイトのルートフォルダーに保存されます。カスタムの場所に画像を保存するには、パスとファイル名を入力します。

    Extract パネルから画像をドラッグしたときのファイル名および拡張子の編集オプション
    Extract パネルから画像をドラッグしたときのファイル名および拡張子の編集オプション

    • 画像をクリックすると、Dreamweaver の状況に応じたコードヒントが表示されます。HTML ドキュメントまたは CSS ドキュメントのコードビューで、挿入ポイントにカーソルを置きます。background-image プロパティ名または <img> タグを入力すると、選択した画像の名前がコードヒントに表示されます。画像を選択し、必要に応じて名前と拡張子を変更して、Enter キーを押します。

    デフォルトでは、画像はサイトのルートフォルダーに保存されます。画像をカスタムの場所に保存するには、カスタムファイルのパスとファイル名を入力します。

    コードヒントを使用した画像の抽出
    コードヒントを使用した画像の抽出

PSD ファイルから計測値を抽出

Extract パネルを使用すると、PSD カンプの 2 つの任意のエレメント間の測定値を簡単に表示および抽出できます。 

  1. Extract パネルの PSD ファイルで、Shift キーまたは Command キーを押しながら目的のエレメントをクリックします。

    Extract パネルに、2 つのエレメント間の水平距離と垂直距離が表示されます。

    Extract パネルの測定値
    Extract パネルの測定値

    注意:

    計測値を%で表示するには、エレメントをクリックしてから、%をクリックします。

  2. 目的の値をクリックしてクリップボードにコピーします。

  3. 必要な場所(CSS デザイナーの CSS プロパティまたはコード内など)に値をペーストします。

PSD ファイルからフォント、カラー、グラデーションを抽出

Extract パネルでは、PSD カンプで使用されているフォント、カラー、グラデーションの CSS プロパティを抽出できます。

  1. Extract パネルで「スタイル」をクリックします。

  2. フォントを抽出するには、「フォント」セクションで次の操作を実行します。

    1. 必要なフォントタイプを展開します。

      フォントの詳細を見るには、Adobe Fonts アイコン()をクリックします。

    2. コピーする形式やサイズを表示されるポップアップでクリックし、「CSS をコピー」をクリックします。クリックしたフォント、形式、サイズを使用するテキストエレメントが Extract によりタグ付けされます。

      注意:

      フォントの単位を、Extract 環境設定(環境設定/Extract)で「em」または「rem」に変更できます。Extract パネルの右上隅にあるポップアップメニューの「PSD をリロード」をクリックして変更を確認します。

      フォントの抽出
      フォントの抽出

    3. コードまたは CSS デザイナーなど必要な場所に CSS をペーストします。

    カラーを抽出するには、「カラー」セクションで次の操作を実行します。

    1. 目的のカラースウォッチをクリックします。選択したカラーを使用するエレメントが Extract によってタグ付けされます。

      注意:カラーピッカーを使用して PSD カンプから他のカラーを選択することもできます。

    2. カラースウォッチのクリック時に表示されるポップアップで、必要なカラーモデル(RGB、Hex または HSL)を選択し、カラー値をコピーします(Ctrl + c または Command + c)。

      カラーの抽出
      カラーの抽出

    3. コードまたは CSS デザイナーなど必要な場所にカラー値をペーストします。

  3. グラデーションを抽出するには、「グラデーション」セクションのグラデーションスウォッチをクリックします。表示されるポップアップで「CSS をコピー」をクリックします。コードまたは CSS デザイナーなど必要な場所に CSS をペーストします。

    環境設定(環境設定/CSS スタイル)で選択されているベンダー接頭辞もグラデーションと共に貼り付けられます。放射状グラデーションはサポートされていないため、放射状グラデーションを抽出した場合は、対応する CSS がベンダー接頭辞なしで挿入されます。

    グラデーションの抽出チュウシュツ
    グラデーションの抽出チュウシュツ

アドビのロゴ

アカウントにログイン