どうせCodaにZencodingを入れるなら最新版を入れよう

ソフトウェア
スポンサーリンク

CodaにZencodingを入れる方は非常に多いと思いますが、どうせなら最新版を入れると機能も増えて作業が捗ります。

Coda用のZenCodingを入れるならGoogleCodeの方から

Coda用のZenCodingを探すと以下の2つのリンク先を探し当てることができると思います。

個人的には、GoogleCodeの方をダウンロードする方がいいと思います。なぜなら、ZenCodingの機能が追加されているからです。

個人的によく使っているZenCodingの機能

( )カッコ
グルーピングしたい時に使えます。下のhtml階層から上へ戻って続きを書く時に必須です。
[ ]カギカッコ
値の中身を書く事もできるようになりました。例えばaタグに#のダミーリンクとtargetをつけたい時は
a[href=”#” target=”_blank”]

ショートカットの違い

プラグインファイル名が同名なので区別がわからないのですが、One Crayon提供とGoogleCodeでは、ショートカットが違うので注意が必要です。

One Crayonの方のショートカット
Control + ,
GoogleCodeの方のショートカット
Control + E

新機能サンプル

新機能を使えば、例えば以下のようなZencodingが…

“`(div#header.clearfix>(h1.logo>a[href="#"])+p.description)+(ul#gnavi.clearfix>(li>a[href="#"])*5)+(div.contents.clearfix>(div.main>(div.column>(h2+p*3))*3)+(div.side>(dl>(dt+dd)*4)))+(div#footer>(ul.fnavi>(li>a[href="#"])*5)+address)“`

あっという間に以下のように変換することができます。

“`<div id="header" class="clearfix">
<h1 class="logo"><a href="#"></a></h1>
<p class="description"></p>
</div>
<ul id="gnavi" class="clearfix">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<div class="contents clearfix">
<div class="main">
<div class="column">
<h2></h2>
<p></p>
<p></p>
<p></p>
</div>
<div class="column">
<h2></h2>
<p></p>
<p></p>
<p></p>
</div>
<div class="column">
<h2></h2>
<p></p>
<p></p>
<p></p>
</div>
</div>
<div class="side">
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
</div>
<div id="footer">
<ul class="fnavi">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<address></address>
</div>“`

ぜひ最新版のZenCodingを導入して、効率をあげてくださいね!

リンク