はじめに

Dreamweaverには拡張機能という、他の製品で言うところのマクロのような機能が搭載されています。拡張機能を使うことで、繰り返し作業を自動化したり、Dreamweaverに搭載されていない機能を自分自身で付け足していくことが出来ます。今回は、筆者が制作した、CSSのプロパティーを指定した順番に並び替える拡張機能「CSSプロパティーフォーマット」をご紹介します。

必要ソフトウェア

この記事では、以下のソフトウェアを使用しています。

Dreamweaver CS3

• 体験版
• 購入

CSSを使ってサイトを制作する時に起こりがちなこと

昨今、CSSを使ってサイトを制作する機会が多くなってきているかと思います。そのようなサイトを制作する際は、Fireworksなどでサイトのデザインを組み、そのデザインをHTMLとCSSに落とし込んでいく作業をされているのではないでしょうか。
その際、一度HTMLとCSSを書いただけでFireworksのデザイン通りに落とし込めることは希で、各種ブラウザでプレビューしつつ、Dreamweaverに戻り、フォントサイズを調整したり、パディングを調整したり、と言ったような微調整を繰り返すことが多いかと思います。
そう言うことを繰り返していると、いつの間にかCSSセレクタ内のプロパティーの並び順がバラバラになってしまうことがままあります。以下はh1タグの装飾の微調整を繰り返した結果のCSSです。

h1{
	border-bottom-width: 2px;
	border-left-width: 8px;
	background-color: #CAE0EC;
	border-bottom-style: solid;
	border-left-style: solid;
	padding-left: 0.2em;
	padding-bottom: 0.2em;
	font-size: 150%;
	border-bottom-color: #004875;
	border-left-color: #004875;
}

ご覧になって分かるとおり、ボーダー関係のプロパティーがセレクタ内の上と中と下に散らばって存在しています。
サイト制作直後は、どのようなCSSを書いたかが頭の中に残っているので困ることは少ないかもしれないのですが、例えば1ヶ月後にメンテナンスをしようと思った際、このセレクターを見て、ブラウザでレンダリングされた際にどのような見た目になるかを想像するのは少々手間がかかる事でしょう。

CSSにもコーディングスタンダードを

このように、セレクタ内のCSSのプロパティーの並び順が統一されていないと、後々のメンテナンスに手間がかかってしまうことが容易に想像されます。そのような事態を避けるためにはどうしたらよいのでしょうか。

この問いに対する1つの答えは、HTMLやJavaScriptなどにコーディングスタンダードがあるように、CSSにもコーディングスタンダードを導入する、というものです。例えば、『セレクタ内でのCSSのプロパティーの並び順はマージン→パディング→ボーダー→…の順番に必ず並べるようにする』と言った社内規則を作り、それを守ると言うことです。

『コーディングスタンダード通りに作れば、CSSセレクタ内のプロパティーは必ず決まった順番になる』と言う状態にしておくことで、あるセレクタのレンダリング結果をパッと見て把握しやすくすることが出来ます。このようにしておくことで軽減される後々のメンテナンスコストはかなりのものになるでしょう。

しかし、コーディングスタンダードを守ることは大変

しかしながら、実際問題として、納期に追われながらコーディングをしている時に、"コーディングスタンダードでは、このCSSプロパティーはあのプロパティーの前に入れないといけないんだよね"と言ったことを意識しながら作ることは大変手間がかかるので、ついついセレクタの末尾にプロパティーを追記していってしまう、と言うのが普通でしょう。その結果、せっかく制定したCSSコーディングスタンダードが守られることなく、後々のメンテナンスの際に手間がかかってしまうと言うことがよくあるのです。

手間がかかることは拡張機能で自動化してしまう

制作時はとりあえず追記して、納品の直前にコーディングスタンダード通りにプロパティーをコピー＆ペーストして整列する、と言うのも一つの手です。ただ、昨今のCSSベースのサイトでは、CSSファイルの総行数が数百行と言ったこともよくあることで、それだけの規模の物をコーディングスタンダード通りに手動で並び替えるのも手間がかかります。

そこで、Dreamweaverの拡張機能の出番です。
前に述べたとおり、拡張機能とはマクロのようなもので、定型作業の自動化を行うことが出来ます。従って、拡張機能を使うことで『CSSコーディングスタンダード通りにCSSのプロパティーを並び替える』と言った機能をDreamweaverに付け足すことが出来ます。そして、そのような機能をDreamweaverにインストール出来るようにパッケージ化したものが、今回ご紹介する「CSSプロパティーフォーマット」です。

CSSプロパティーフォーマットをつかう

編集まずは、CSSプロパティーフォーマットをダウンロードしてください。ダウンロード後、ファイルをダブルクリックすると、Extension Managerが立ち上がり、CSSプロパティーフォーマットをインストールするかどうかを聞いてきますので、「承諾する」を押しインストールします。

次に、Dreamweaverを起動します。すると、メインメニューの[コマンド]の中に[CSSプロパティーフォーマット]と[CSSプロパティーフォーマットの設定...]と言う項目が追加されていることが確認できるかと思います。

では、実際に使ってみることにしましょう。先ほど例に挙げた、コーディングスタンダードが守られていないh1タグのセレクタを以下に載せますので、コピー＆ペーストして、style.cssなどの名前で適当な場所に保存してください。

h1{
	border-bottom-width: 2px;
	border-left-width: 8px;
	background-color: #CAE0EC;
	border-bottom-style: solid;
	border-left-style: solid;
	padding-left: 0.2em;
	padding-bottom: 0.2em;
	font-size: 150%;
	border-bottom-color: #004875;
	border-left-color: #004875;
}

保存した後、保存したCSSファイルを開いたまま、メニューから[コマンド]-[CSSプロパティーフォーマット]と選びます。すると、自動的に以下のように並び替えられるかと思います。

h1{
	padding-bottom: 0.2em;
	padding-left: 0.2em;
	border-bottom-color: #004875;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-left-color: #004875;
	border-left-style: solid;
	border-left-width: 8px;
	font-size: 150%;
	background-color: #CAE0EC;
}

ご覧の通り、同じ系統のプロパティーが同じ箇所に来るように整列されました。
このように、手間になってしまう作業は、Dreamweaverでは拡張機能で自動化することが出来るのです。

CSSプロパティーフォーマットの設定をする

CSSプロパティーフォーマットでは初期値で一定の順序にCSSのプロパティーを並び替えるように設定されていますが、それを独自で指定したCSSコーディングスタンダード通りに変更することも出来ます。 変更するには、メニューから[コマンド]-[CSSプロパティーフォーマットの設定...]と選びます。すると、以下のようなダイアログが開き（図1）、CSSのプロパティーがテキストエリアに並んでいるのが確認できるかと思います。

図1: CSSプロパティーフォーマットの設定ダイアログ

CSSプロパティーフォーマットでは、このテキストエリアに並んでいる順番に整列を行うため、ここでの順番を独自で指定したコーディングスタンダード通りに変更し、「保存」ボタンを押すことで、コーディングスタンダード通りに並び替えが行われるようになります。

拡張機能はHTMLとJavaScriptで出来ている

さて、このような機能をDreamweaverに付け足すことは大変なのでしょうか。
実はCSSプロパティーフォーマットはHTMLとJavaScriptで出来ています。実際のコードを見てみましょう。

Windowsでは『C:¥Documents and Settings¥ユーザ名¥Application Data¥Adobe¥Dreamweaver 9¥Configuration¥Commands』、Macでは『ホーム/ライブラリ/Application Support/Adobe/Dreamweaver 9/Configuration/Commands」フォルダの中に、CSS_PropFormat.htm、CSS_PropFormat_conf.htmなどのファイルが有るのが分かるかと思います。

CSS_PropFormat.htmが実際に整列を行うロジックが書かれているファイル、CSS_PropFormat_conf.htmが[CSSプロパティーフォーマットの設定...]で表示されるダイアログです。
Dreamweaverなどのエディタでそれらのファイルを開いていただくと分かりますが、一部Dreamweaverにしか存在しないJavaScriptオブジェクトなどを使っていますが、大抵の箇所は一般的なWebを制作する際に書くようなHTMLとJavaScriptであることが分かります。

つまり、JavaScriptが書ける方は、Dreamweaver独自のオブジェクトやAPIの使い方さえ覚えてしまえば拡張機能を作成することが出来るのです。

Dreamweaver独自のオブジェクトやAPIの使い方などは、メニューの[ヘルプ]の中にある[Dreamweaver拡張ガイド]や[Dreamweaver APIリファレンス]を参照してください。

Adobe Exchangeで拡張機能を入手する

英語のサイトになってしまいますが、Adobe ExchangeというAdobe製品の拡張機能を配布しているサイトがAdobeのサイト上に存在します。Adobe Exchangeでは、有志の手によって制作された、各種Adobe製品向けの拡張機能が数多く公開されています。こちらで有用な拡張機能を入手することも出来ます。
また、ご自身で制作された拡張機能をAdobe Exchange上で公開することも出来ますので、腕に自信のある方は是非公開してみてください。

まとめ

Dreamweaverには拡張機能というマクロのような機能があり、定型作業を自動化したり、Dreamweaverに備わっていない機能を自分で付け足していくことが出来ることが分かりました。また、拡張機能はHTMLとJavaScriptで出来ているため、Web制作を行っている人にとっては、比較的簡単に開発できる可能性があることが分かりました。

日々のWeb制作の効率化の為にも、是非Dreamweaverの拡張機能をお使いになってみてください。

著者について