Zen-Cording作法でコーディング。

Zen-CordingはネストしたhtmlをZen-Cording作法で書く事によってショートカットから展開できるライブラリ。大体のアプリに対応しwordpressのプラグインもあります。Google Projectからダウンロードしてインストールすればとりあえず準備完了。

で、下記をコピペしてショートカット(tabやcmd+eなどアプリによります。)から展開

 
div#wrapper>(header#gh>(h1>a)+nav>ul>li.ghnav$*3>a)+(article>sectiton.entry>(h1>a)+dl+)+(aside>(section>(h2>a)+ul>li.item$*3>a))+(section>(h2>a)+dl>(dt+dd)*2)+(footer>p)
 

で、下記のコードが展開されます。
“$”は連番を振ってくれるので、IDやクラスに使え。”*”は繰り返す回数を指定できます。

 
<div id="wrapper">
<header id="gh">
<h1><a href=""></a></h1>
<nav>
<ul>
<li class="ghnav1"><a href=""></a></li>
<li class="ghnav2"><a href=""></a></li>
<li class="ghnav3"><a href=""></a></li>
</ul>
</nav>
</header>
<article>
<sectiton class="entry">
<h1><a href=""></a></h1>
<dl></dl>
</sectiton>
</article>
<aside>
<section>
<h2><a href=""></a></h2>
<ul>
<li class="item1"><a href=""></a></li>
<li class="item2"><a href=""></a></li>
<li class="item3"><a href=""></a></li>
</ul>
</section>
</aside>
<section>
<h2><a href=""></a></h2>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</section>
<footer>
<p></p>
</footer>
</div>
 

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

10 − two =