Zen Codingを使ってみました!!

2011.01.11

新年明けましておめでとうございます。
本年もドアズをどうぞ宜しくお願いします。

2011年初エントリー。
今回はZen Codingについてご紹介します。
Zen Cording（ゼンコーディング）とは、HTMLやCSSでマークアップをする際の簡潔な記述法で、
慣れればコーディングスピードがウン十倍にもなるとかならないとか。

私はDreamWeaverの入力補助機能で十分じゃないのー？という感じだったんですが、
物は試しで、ついに導入してみました。

DreamWeaver用はこちら。

解凍して、mxpファイルを開くとDWの拡張機能のウィンドウが開くので、
「承諾する」を選んで、インストール。

そしてDW再起動。

導入は以上。カンタン★

Zen Codingはこんな感じで入力します。
CSSのセレクタを書く感覚に似ていますね。

#header+#main+#footer

一行書いたら、Ctrl+,で展開!!
▼展開後

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

#header>ul.menu>li*3>a

一行書いたら、Ctrl+,で展開!!
▼展開後

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

おおおおおおおおお（驚）
liの掛け算便利!!

基本的なルールは・・・

+ はタグを繋げる
> は入れ子
* はタグを繰り返す
# はid（divはタグを省略可）
. はclass（divはタグを省略可）

という風になっています。
Ctrl+,で展開と書きましたが、Tabでもいけます。

（インデントなし派の方は、Tabを使うと他の場面で不都合が出てきちゃうのでCtrl+,で。
次回紹介しますね。）

お、この機能も素敵。
子要素を包括している系のタグ、dlやul、ol、tableなどは
お尻に「+」をつけると

dl+
（Ctrl+,で展開!!）

<dl>
<dt></dt>
<dd></dd>
</dl>

一発でドン!!
早いーーー!!

すごい気持ちいいサンプル

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer.

展開してみてください（笑）
数学の式のようですね。

実際にはここまでできません自分。

あと、地味に便利だったのが、Alt+右矢印、Alt+左矢印です。

タグ同士の間や、タグ内の「””」といった、テキストを入れるべき場所だけにカーソルをちょんちょんと移動させられるんです。

と、なかなかの好感触だったので、早く慣れて実務でガシガシ書きたいなーー!!

次回は、Zen Cordingのデフォルトのインデントを消す方法を紹介しますね。

https://dis.ne.jp/blog/coding/1810.html/trackback