Zen-Coding for HTML

イントロダクション

Zen-Coding は独特の短い記法で構文を指定し、コマンドによりテキストを入力する方式です。
ZenCoding for HTML をマスターして、３倍速いコーディングを身につけてください。

使用方法

使い方はいたって簡単。ul>li の様に入力し、直後に Ctrl + ,（カンマ）を押すだけです。

    ul>li■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <ul>
        <li>■</li>
    </ul>

※ ■ はテキストカーソル位置を表します。

「hogehoge a■」の様に、キーの前に半角空白がある場合は、半角空白以降のみが展開されます。
「ほげほげa■」の様に、全角文字がある場合は、それ以降のみが展開されます。
「<p>a■」の様に、htmlタグがある場合は、それ以降のみが展開されます。

展開例

開始・修了タグ生成

タグ名を入力し、Ctrl + ,（カンマ）を押すと、開始・修了タグを生成してくれます。

    b■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <b>■</b>

タグを表す < > を入力する必要はありません。

a の場合は <a href="■"></a> のようにリンク指定部分まで生成されます。
br の様に終了タグが無いものは <br /> と展開されます。
img の場合は <img src="■" alt="" /> と展開されます。

階層指定

> でタグ名をつなげることで、階層を指定することが出来ます。

    div>ul>li■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <div>
        <ul>
            <li>■</li>
        </ul>
    </div>

並列指定

+ でタグ名をつなげることで、複数のタグを一度に指定することが出来ます。

    div+p■
    
        ↓ Ctrl + ,（カンマ）を押下

    <div>■</div>
    <p></p>

> と + に優先順位があるわけではなく、項は右から順に評価され、展開されます。

グルーピング

項を ( ) で囲むことで、項の評価順序を指定することが出来ます。

    (x>y)+z■

        ↓ Ctrl + ,（カンマ）を押下

    <x>
        <y>■</y>
    </x>
    <z></z>

上記の例で、グルーピング指定しない場合は下記の様になります。

    x>y+z■

        ↓ Ctrl + ,（カンマ）を押下

    <x>
        <y>■</y>
        <z></z>
    </x>

繰り返し回数指定

タグ名の直後に *回数を指定することで、タグを回数個生成することが出来ます。

    ul>li*3■
    
        ↓ Ctrl + ,（カンマ）を押下

    <ul>
        <li>■</li>
        <li></li>
        <li></li>
    </ul>

連番指定

id名等に $ を含ませておき、繰り返し回数指定を行うと、$ 部分が連番に置き換わります。

	div#box$*3■
	
        ↓ Ctrl + ,（カンマ）を押下
	
	<div id="box1">■</div>
	<div id="box2"></div>
	<div id="box3"></div>

id, class 指定

タグ名#id名、タグ名.クラス名で、id名、クラス名を指定して展開することが出来ます。

    div#hoge■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <div id="hoge">■</div>

    div.foo■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <div class="foo">■</div>

属性指定

タグ名直後に [属性名=属性値…] を記述することで、id, class 以外の属性を指定することが出来ます。

    input[type=text]■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <input type="text">■</input>

空白で区切って、属性を複数指定することも出来ます。

    input[type=text name=foo]■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <input type="text" name="foo">■</input>

省略形

いくつかのよく使うタグの組み合わせは以下の省略形で入力することが出来ます。

ul+

    ul+■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <ul>
        <li>■</li>
    </ul>

ol+

    ol+■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <ol>
        <li>■</li>
    </ol>

dl+

    dl+■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <dl>
        <dt>■</dt>
        <dd></dd>
    </dl>

table+

    table+■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <table>
        <tr>
            <td>■</td>
        </tr>
    </table>

html:5

    html:5■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <!DOCTYPE HTML>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        ■
    </body>
    </html>

html:4s

    html:4s■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <!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>

html:4t

    html:4t■
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        ■
    </body>
    </html>

tr, td

table タグ直後で展開した場合は tr タグを生成します。

    <table>
    	■
    </table>
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <table>
    	<tr>■</tr>
    </table>

tr または /td 直後で展開した場合は td タグを生成します。

    <tr>■</tr>
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <tr><td>■</td></tr>

    <tr><td></td>■</tr>
    
        ↓ Ctrl + ,（カンマ）を押下
    
    <tr><td></td><td>■</td></tr>

その他

bq は backquote に展開されます。

	bq■
    
        ↓ Ctrl + ,（カンマ）を押下
    
	<backquote>■</backquote>

an は a name＝”” に展開されます。

	an■
    
        ↓ Ctrl + ,（カンマ）を押下
    
	<a name="■"></a>