PhotoshopとDreamweaverの新しいワークフロー 第2回：エクストラクトパネルを使って簡単にCSSデザインを作成しよう
PhotoshopとDreamweaverの新しいワークフロー
Dreamweaver CC（2014年10月公開） Photoshop CC （2014年10月公開） 対応
この記事では、エクストラクトパネルを使って、PSDファイルからCSSコードを抽出し、CSSデザインを作成する方法を解説します。
CSSの抽出に役立つエクストラクトパネル
最近のWebサイトではスマートフォン向けにデータ転送量を減らすために、これまで画像を用いていた表現を、表現力に優れたCSS3で実装することが多くなってきました。
※また、CSSだけで表現することで、データ転送量が減るだけでなく、修正にも強いWebサイトを作成することが可能です。
しかし、CSS3で様々な表現ができるものの、表現の内容によっては、グラデーションなどの記述が複雑になったり、古いブラウザーに対応するためベンダープレフィックスを付ける必要があったりと、コードが膨大な量になることもあり、手作業でコーディングするのは大変です。
そうした際に役立つのがDreamweaverのエクストラクトパネルです。エクストラクトパネルを用いると、Photoshopで作成したデザインカンプ（PSDファイル）から簡単にCSSコードを抽出することができます。CSS3で再現可能なところは、CSS3に準拠したコードをはき出してくれるため、そのまま利用することが可能です。
本記事では、エクストラクトパネルを使って、PSDファイルからCSSコードを抽出し、CSSデザインを作成する方法を解説します。
作成するサンプル、作業前の下準備
サンプルについて
デザインカンプとして、次のPSDファイル（header.psd）を用意しました。
図1 サンプルヘッダーのデザインカンプ
HTMLファイルはあらかじめ、Dreamweaverで次のように作成しています。
図2 作業前のHTMLと［ライブビュー］
これらのファイルは、サンプルデータの「CCExpress-before」フォルダにあります。
ベンダープレフィックス追加機能の設定変更
Dreamweaverには、CSSコーディング時にベンダープレフィックスを追加する機能がありますが、対象となるのはグラデーション表現のみです。さらに、初期設定では、追加されるのはWebkit用ベンダープレフィックスのみとなっています。
これはエクストラクトパネルを使ってCSSを抽出したときも同様です。FirefoxやOpera向けのベンダープレフィックスも必要な場合は、［環境設定］ダイアログボックス→［CSSスタイルシート］→［CSS接頭辞］でチェックを入れます。
図3 FirefoxやOpera向けのベンダープレフィックスも必要な場合は［CSS接頭辞］でチェックを入れる
ログインボタンのCSSを抽出する（新しいclass名を作成してCSSを適用）
エクストラクトパネルでCSSをコピー
Dreamweaverのエクストラクトパネルからデザインカンプ（header.psd）をアップロードし、エクストラクトパネルでそのPSDファイルを選択します。すると、エクストラクトパネルでそのPSDでファイルが開きます。
図4 エクストラクトパネルでデザインカンプ（header.psd）を選択する
続いて、新規にCSSファイルを作成します。既にCSSファイルがある場合は、作成する必要ありません。
図5 ［CSSデザイナー］パネルから新規CSSファイルを作成する
CSSファイルを作成したら、エクストラクトパネル内でCSSを抽出したいデザイン要素を選択します。
※エクストラクトパネルでは、画像として抽出することも可能です。一度CSSを抽出し、適用して再現できなかったら、画像として抽出するとよいでしょう。
ここではログインボタンを選択します。すると、下側にコピーするCSSを選択するためのダイアログボックスが表示されます。チェックを入れた項目だけがコピーされます。今回は［すべてを選択］にチェックを入れて、すべてのスタイルをコピーします。［CSSをコピー］をクリックすると、クリップボードにCSSがコピーされます。
図6 ［すべてを選択］にチェックを入れて、［CSSをコピー］をクリックする
［ライブビュー］でCSSをペースト
［ライブビュー］に移って、エクストラクトパネルでコピーしたCSSを適用します。LOGINの少し右側をクリックしてpタグを選択し、エレメントディスプレイにclass名として「login」を入力し、Enterキーで確定します。
図7 エレメントディスプレイにclass名「login」を入力する
ソースを選択するダイアログボックスが表示されるので、先ほど作成したCSSファイルを選択し、Enterキーで確定します。これで新しいclass名が作成できました。
図8 class名を作成するCSSファイルを選択する
さらにエレメントディスプレイ上で右クリック→［スタイルをペースト］を選択すると、先ほどエクストラクトパネルでコピーしたCSSがペーストされます。すると、CSSが適用され、PSDファイル上で作成したボタンと見た目が再現されます。
図9 ［スタイルをペースト］を選択すると、CSSが適用される
文字部分のCSSの適用
次に、ログインボタンの上にある文字「LOGIN」の部分です。エクストラクトパネルでLOGINの文字をクリックします。今回は、既にチェックが入っている項目だけをコピーします。
LOGINという文字は、aタグで括られているので、エレメントクイックビューなどを使用してaタグを選択し、エレメントディスプレイで「loginText」と入力し、新しいclass名を作成します。
図10 エクストラクトパネルで文字「LOGIN」のCSSをコピーし、［ライブビュー］でエレメントディスプレイにclass名「loginText」を入力する
class名を作成したら、先ほどと同じ手順で「スタイルをペースト」します。これでテキストの色が変わります。デザインカンプでは、この文字に「Adobe Text Pro」フォントを使用しています。「Adobe Text Pro」フォントが入っている環境では、Dreamweaver上でもこのフォントが適用されます（「Adobe Text Pro」はTypeKitから導入できます）。
図11 文字「LOGIN」に、エクストラクトパネルでコピーしたCSSを適用したところ
見た目はPSDファイルにかなり近づきましたが、文字が左揃えになっています。エクストラクトパネルでのCSS抽出では、位置情報などは書き出されません。そのため、レイアウトなどの足りない部分は手作業で追記します。
［CSSデザイナー］パネルの［セレクター］ペインで「.login」を選択し、text-alignプロパティをcenterにします。また、line-heightプロパティを28pxに指定します。
図12 text-alignプロパティをcenter、line-heightプロパティを28pxに指定する
さらに、「.loginText」を選択し、text-decorationプロパティでnoneを選択します。
図13 text-decorationプロパティをnoneに指定する
同様の手順で、検索窓にもデザインを適用します。class名「searchArea」を作成し、CSSをペーストします。
図14 検索窓に、エクストラクトパネルでコピーしたCSSを適用したところ
メニューのCSSを抽出する（タグに対してCSSを適用）
続いて、メニューのデザインを作成します。先ほどのログインボタンでは、すべて新しいclass名を作成し、そこにCSSを適用しましたが、タグに対してもCSSを適用することが可能です。もちろん、既存のclass名に対して、コピーしたCSSを追記することもできます。
メニュー背景のCSSの適用
メニューのタグに対してCSSを適用してみましょう。エクストラクトパネルでメニューの背景を選択し、CSSをコピーします。
図16 ［エレメントクイックビュー］でulタグを選択する
［CSSデザイナー］パネルの［セレクター］にある「セレクターを追加」ボタンをクリックすると、「body ul」と追加されますが、カーソルキーの上を1回押すと、「ul」だけにすることが可能です。
図17 セレクターとしてulを追加する
今回はulタグに適用するので、「ul」だけにし、Enterキーで確定したら、そのまま右クリック→［スタイルをペースト］を選ぶと、背景のCSSが適用されます。
図18 メニューの背景に、エクストラクトパネルでコピーしたCSSを適用したところ
メニュー文字のCSSの適用
同様にメニューの文字部分をエクストラクトパネルで選択し、［CSSのコピー］を実行して、liタグに対してCSSを適用します。
図19 メニューの文字に、エクストラクトパネルでコピーしたCSSを適用したところ
aタグだけは、デフォルトの青色が残ってしまうので、ここは「a」だけのセレクターを作成し、colorプロパティとtext-decorationプロパティを調整して完成させます。
図20 aタグのcolorプロパティとtext-decorationプロパティを調整したところ
次の図は、ここのまでの作業の結果です（サンプルデータの「CCExpress-after」フォルダ）。
図21 ここまで作業結果
PhotoshopのCSSコピーとの違い
Photoshopにも「CSSをコピー」する機能があります。Photoshopの場合は、スタイルだけをコピーするのではなく、CSSの定義自体をコピーするという違いがあります。そのため、Photoshop上で「CSSをコピー」したときは、Dreamweaver上でCSSファイルを開き、そこにペーストする必要があります。
また、セレクターが妥当なものになっていないこともあるため、その場合は変更が必要です。ただ、一部のパーツだけスタイルを変更するときなどは、便利かつ高速に利用できるでしょう。Webページを新規に作成する、大きく変更する場合は、Dreamweaverのエクストラクトパネルで、一部の修正や変更ではPhotoshopで、と使い分けるとよいでしょう。
次の図は、今回のサンプルのログインボタンで［CSSをコピー］した結果です。
図22 PhotoshopでCSSコピーしてDreamweaver上に貼り付けたもの
図23 Dreamweaverのエクストラクトパネルで［CSSをコピー］して、Dreamweaver上で今回の記事の手順で貼り付けたもの
まとめ
Dreamweaverのエクストラクトパネルを利用することで、複雑なグラデーションを利用したWebデザインであっても容易に対応することが可能です。どうしても再現できないところは、エクストラクトパネルから画像として書き出すこともできます。
Dreamweaverがあれば、様々ななツールを使用することなく、Webサイトを作成していくことが可能です。これはスマートフォン対応のWebサイトを作成するなど、作業量が増えつつある昨今の現場において重宝する機能でしょう。