連載  /  

PhotoshopとDreamweaverの新しいワークフロー 第2回:エクストラクトパネルを使って簡単にCSSデザインを作成しよう

BY 公開

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サイトを作成するなど、作業量が増えつつある昨今の現場において重宝する機能でしょう。

  AUTHOR

関口 和真

株式会社コムセント / 最高技術責任者(CTO)/ PHPを利用したフルスクラッチシステムの作成、CMSのカスタマイズ、Dreamweaver・Photoshopなどを利用したPCサイト、スマートフォンサイトの制作およびJavaScriptを利用したフロントエンド開発を行うほか、システムの運用保守に携わる。大学講師や専門学校講師を兼任。著書に『DreamweaverレッスンブックCC対応』(ソシム社)など