Zen Codingを試してみたら思いの他快適だったので、簡単にまとめておく。
Zen Codingは、HTML/CSSのメタ言語のようなもの。スクリプト言語のように逐次展開もできるし、先にHTMLのテキスト要素を書いてからタグで括ることもできる。
今回まとめるのはHTMLだけ。CSSをまとめないのはSCSSやLESSもあって、SCSSを使い始めているから。少し、調べた限りだと、Zen CodingはSCSSに対応していない。
なお、環境は次の通り。後述の()を使った記法が期待どおり動作しないけれど、それだけのためにエディタを変えるのも何なので。
- OS: Ubuntu 12.04
- Editor: gedit 3.4.1 + Zen Coding Plug-in
必要となる最小の操作方法は次の2つ。自分の場合、1つ目だけを使ってまず構造だけ書いていく方が性に合っている。
- 逐次展開する場合は省略記法で書いては、Ctrl+E
- テキスト要素をタグで括るにはテキストを選択した状態でCrtrl+Shift+E
まずはひな形。"要素名:DOCTYPEの省略形"と書いて、Ctrl+Eを押すと、DOCTYPE宣言とhtml要素に展開される。html要素には、head要素とbody要素も含まれている。
html:4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
</body>
</html>
個々の要素はタグ名をそのまま書けばいい。
p
<p></p>
id属性やclass属性はCSSセレクタのように書ける。
p#id
p.class
<p id="id"></p>
<p class="class"></p>
要素名を省略すると、div要素が補われる。
#id
.class
<div class="class"></div>
<div id="id"></div>
その他の属性は要素名の後に[]で括って書く。
a[target="_blank"]
<pre class="prettyprint">
<a href="" target="_blank"></a>
続いて、ドキュメント構造の表し方。まずは兄弟要素。
h1+p
<h1></h1>
<p></p>
続いて子要素。
ul>li
<ul>
<li></li>
</ul>
*を使うと繰り返しを表現できる。
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
なお、繰り返しと合わせて$を使うと、連番に展開される。
p#id$*5
<p id="id1"></p>
<p id="id2"></p>
<p id="id3"></p>
<p id="id4"></p>
<p id="id5"></p>
()で括るとグループ化される。はずなのだけれど、これはgeditのZen Coding Plug-in plug-inでは展開されない。残念。
form>(label+input:text)*2+input:button
<form action="">
<label for=""></label>
<input type="text" name="" id="" />
<label for=""></label>
<input type="text" name="" id="" />
<input type="button" value="" />
</form>
他にも色々とできるみたいだけれど、まずはこれだけ使えるだけでも、随分とサクサクと入力できるように思う。
References