開始タグを書いて、クラスを書いて、閉じタグを書いて…。
毎度毎度htmlコードやcssを書いていると、
もっと効率化出来ないものかと思いますよね。
まだあまり記事を見かけない気がしますが、
ロシアからやってきたZen codingが、
劇的に私の作業効率を上げてくれたのでご紹介。
（ダウンロード等は、各自の責任でお願いしますねー。）
■Zen codingとは
↓公式（おそらく）
http://code.google.com/p/zen-coding/
Zen codingはテキストエディタの拡張機能。
適用すると、少ない文字入力で面倒なコーディングを自動で行ってくれます。
デモ映像を見てちょっと感動しました。
Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.
サポートされているエディタは、
- Full support：Coda、Espresso、TextMateなど
- artial support (“Expand Abbreviation” only)：Dreamweaver CS4, Windows, Macなど
（詳細は公式サイトで。）
■Zen codingをDreamweaver cs4で使う場合
※今回はmac（snow leopard）に入れています。
【1】
http://code.google.com/p/zen-coding/downloads/detail?name=Zen%20Coding.mxp&can=2&q=dreamweaver
からdreamweaver用のプラグインをダウンロード。
【2】
ダウンロードしたファイルを実行する。
ADOBE EXTENSION MANAGER CS4が起動し、
プラグインとして読み込まれる。
※このときにDWのメニューが文字化けした場合、
Application Support/Adobe/Dreamweaver CS4
を削除すると復旧出来る。
以上で最低限の準備は完了。
【3】
試しに入力してみましょう。DWでhtmlファイルを開き、
div#main
など、Zen-coding独自の記法にて記述する。その後
control+,（カンマ）
をおすとコードが展開する。
Zen codingの記法は下記をご参照下さい。
- Zen HTML Elements
http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn
- Zen HTML Selectors
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
- Zen CSS properties
http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
■☆より便利に使う為に。
doctype宣言のデフォルト設定がenなどになっているため、
自分好みに変更しておくと便利です。
ユーザ名／ライブラリ／Application
Support／Adobe／DreamweaverCS4／ja_JP／Configuration／Commands／ZenCoding／zen_settings.js
11行目～の
'variables': {
'lang': 'en',
'locale': 'en-US',
'charset': 'UTF-8',
'profile': 'xhtml',
を編集するとデフォルト値を変更可能。
（再起動不要）