2012年12月24日月曜日

Zen Codingのミニマル・リファレンス

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

投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)