東京北青山、大阪四ツ橋発、WEBディレクターのブログ

タケダノートcoding

coding,タケダノート

Zen Coding触ってみました

腹筋を始めようと思います。今年何度目かの決意です。
こんにちわ。たけだです。

最近何かと話題になっているzen-codingを触ってみました。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.


Dreamweaver導入方法

まずはDreamweaverプラグインをダウンロード(v0.6)
http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Dreamweaver.v0.6.zip&can=2&q=

そして、フォルダ内のZen Coding v.0.6.mxpをダブルクリックして承諾するをクリックするだけ。

lang属性がen-USになっているので、必要な場合は以下のjsファイルで変更可能。
Documents and Settings/ユーザー名/Application Data/Adobe/Dreamweaver CS4/ja_JP/Configuration/Commands/ZenCoding.js

setting_after.jpg


使い方
入力してCtrl+カンマで展開します。

div

<div></div>


div#header>ul>li*4

<div id="header">
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>


CSSでも

pos:r

position:relative;


va:b

vertical-align:bottom;

操作方法に慣れれば、すごく早くコーディングできそうですね。

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

----------------------------------------------------------------
Movable Typeでも使えます。

Movable Typeプラグインのダウンロード
http://code.google.com/p/mt-zen-coding/downloads/list