Aptana Studio で Zen Coding を使おう!
Aptana Studio で Zen Coding を使おう!
Aptana Studio に Zen Coding インストール
- メニュー > ヘルプ > 新規ソフトウェアのインストールを選択
- ロケーションにhttp://zen-coding.ru/eclipse/updates/を指定して Zen Coding for Eclipse をインストール
-
これで Zen Coding が有効になります. 試しに
p.test
と入力して Ctrl + E を押してみてください.<p class="test"></p>
と展開されれば成功です.
Example
使用例です. 基本は css セレクタを書いて, Ctrl+E を入力して展開する流れになります.
要素とidを展開
p#test
<p id="test"></p>
要素とclassを展開
p.test
<p class="test"></p>
リストを展開
ul>li*4
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
属性を指定して展開
input[type=submit]
<input type="submit" />
連番展開
ol>li.index$*4
<ol>
<li class="index1"></li>
<li class="index2"></li>
<li class="index3"></li>
<li class="index4"></li>
</ol>
複数のタグを展開
section>h1+p+pre
<section>
<h1></h1>
<p></p>
<pre></pre>
</section>
ブロックで展開
html>(head>title)+(body>h1)
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
</body>
</html>
分かりやすい使用例動画
不満は改行を含む展開をした際に, インデントが tab になっちゃってること. スペース4 に変える設定も見当たらない.
その他は概ね満足.
Aptana Studio で Zen Coding を使おう! http://t.co/LZhVDLF via @phi_jp
[…] Aptana Studio Aptana Studio で Zen Coding を使おう! それではよいコーディングライフを！！ 何かわからないことがあればコメントやリプライ(Twitter: @DAI199)でどうぞ！！ […]
Win7 64bit用でZenCordingもあぷたな導入方法 http://t.co/pxokxiRG と http://t.co/EfmC32Ez