Dreamweaver でこれらのチュートリアルをお試しください
モダンでレスポンシブな web ページをデザイン
アセットを一括抽出する
高解像度の画面用の画像など、webに最適化された画像を様々な解像度でPhotoshopドキュメントから一括抽出する方法を説明します。
2022年7月1日より、Dreamweaver 21.2以前のバージョンでは、Extractパネルの機能が使用できなくなります。Adobe Photoshopを使って スタイル情報を抽出 し、 PSDコンポーネントからアセットを抽出 して、Dreamweaverで再利用できます。
必要な情報
サンプルファイルをダウンロード
一括抽出 機能を使用すれば、DreamweaverのExtractパネル内でPhotoshopドキュメントを開き、様々な解像度の画像をすぐに使用できる状態で抽出できます。様々な解像度のweb画像を抽出することで、表示するデバイスの解像度に応じて最適な画像を表示するようにwebサイトを最適化できます。
batch-extract-assets.zip プロジェクトファイルをダウンロードして展開します。Dreamweaverでindex.htmlを開き、Extract ワークスペースに切り替えます。
Extractパネルで「PSDをアップロード 」をクリックし、プロジェクトファイルに含まれているvermilion-design.psdを開きます。
Extractパネルでヒーロー画像を選択 し、アセットを抽出アイコンをクリックしてアセット抽出オプションを表示します。
画像を抽出する前に、抽出する場所とファイル名のプロパティを確認して、サイト構造に最適な設定にしてください。確認するには、「環境設定を編集」アイコンをクリック します。
デフォルトでは、Dreamweaverでは、MDPI（中密度）、XHDPI（超高密度）、XXHDPI（超超高密度）の3つの異なる解像度で画像が抽出されます。環境設定ダイアログで次の手順をおこないます。
抽出する解像度を指定します。
Dreamweaverでファイル名に付加される接尾辞をカスタマイズします。
画像を保存するフォルダーを選択します。
「フォルダー」セクションで、3つの各解像度のファイルパスの先頭に「images/ 」を追加します。「適用」をクリック し、「閉じる」をクリック します。
アセット抽出オプションでは、アセット名やファイル形式などの詳細情報を設定できます。
「複数保存 」をクリックします。
抽出が完了したら、ファイルパネルを開いて 一括抽出の処理結果を確認します。Dreamweaverでは、Extractの環境設定にもとづいて3つの異なる解像度でヒーロー画像が抽出され、サイト構造内の指定したフォルダーに追加されます。これはすべてワンクリックで実行できます。
「DeviceAware.css 」を開くと、3つの異なる画面解像度（小・非Retina、中・Retina、大・Retina）を定義する3つのメディアクエリーが表示されます。メディアクエリーにはそれぞれCSSクラスが含まれています。それぞれのクラスでbackground-imageプロパティを定義 して、各メディアクエリーに最適な抽出画像を選択します。
右側の例では、Retina画面（中）を定義するメディアクエリーと、対応するCSSクラスを示しています。この解像度では、XHDPIバージョンの画像が最も適しています。
レスポンシブなwebサイトでは、絶対ピクセル値ではなくパーセント値で、幅、高さなどの位置プロパティを定義します。
Extractパネルで単位をパーセントに変更するには、ヒーロー画像を選択し、パーセント記号（％）を選択 します。
これで幅と高さのプロパティがパーセントで表示されるようになりました。2つの要素を選択すると、要素間の間隔がパーセントで定義されます。これまでと同様に、ExtractパネルからCSSを直接選択・コピーして、コードに貼り付けることができます。
