攻略! ツール・ド・プログラミング(19) HTMLやCSSのコーディングを爆発的に効率化する「Zen-Coding」

Zen Codingとは

Zen CodingはHTMLのタグやCSSのスタイル定義の記述をショートカット化し、決められた略語を記述するだけで複雑なマークアップを展開できるようにするツールである。たとえば、次のような略語が用意されている。

リスト1

html:4t

これはHTMLの雛型を展開するための略語で、これをエディタに記述して決められたショートカットキー(デフォルトでは『Ctrl+E』や『Alt+E』)を入力すると、次のようなマークアップに展開される。

リスト2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTMLのタグやCSSのプロパティに合わせてさまざまな略語が用意されており、組み合わせて記述することで複雑なマークアップも非常にコンパクトに書けてしまう。次のコードは少し長いが、HTMLタグ用の略語を組み合わせたものだ(あえて1行でまとめてみたが、別に常に1行で書かなければならないわけではない)。

リスト3

html:xml>(head>title)(body>(div#header>h1)(div#menubox>ul#menu>li*4>a)(div#main>form:post>input:text*3+input:submit#button))

これは以下のマークアップに展開される。タグ名だけでなく、属性の指定などにも対応しているのが大きなポイントだ。

リスト4

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <div id="header">
            <h1></h1>
        </div>
        <div id="menubox">
            <ul id="menu">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
        <div id="main">
            <form action="" method="post">
                <input type="text" name="" id="" />
                <input type="text" name="" id="" />
                <input type="text" name="" id="" />
                <input type="submit" value="" id="button" />
            </form>
        </div>
    </body>
</html>

Zen-Codingはさまざまなエディタのプラグインとして提供されている。現在のところ、フル機能をサポートしたプラグインが提供されているエディタとして、以下のものが挙げられている。

Aptana(Eclipse)
Coda
Espresso
TextMate
Visual Studio
textarea
Komodo Edit/Komodo IDE
Notepad++
IntelliJ IDEA
ReSharper plugin for Visual Studio

また、WebサイトのテキストエリアにZen-Codingの機能を埋め込むためのライブラリも公開されている。その他にも、一部の機能のみをサポートしたエディタとしてTopStyleやGEdit、UltraEdit、BBEditなどが挙げられている。

本稿ではWindows用のフリーのエディタである「Notepad++」を使用して、Zen-Codingの基本的な使い方を紹介する。

Notepad++でZen Codingを利用する

各エディタ用のZen-Codingプラグインは公式サイトのダウンロードページより入手することができる。Notepad++の場合は「Zen Coding for Notepad++」というものをダウンロードすればよい。

ダウンロードしたファイルを展開すると、中には「NppScripting」というフォルダと「NppScripting.dll」というファイルが含まれている。これをNotepad++のプラグイン用のフォルダ(デフォルトでは「C:\Program Files\Notepad++\plugins」)に配置すれば、Notepad++でZen Codingが使用できるようになる。プラグインが正常に適用されれば、図1のようにメニューバーに[Zen Coding]という項目が追加されるはずだ。

プラグインをインストールするとZen-Coding用のメニューが追加される

プラグインがインストールできたら、任意のファイルを開いて次のようにタイプし、[Ctrl+E]を押してみよう。

リスト5

html

すると以下のようにhtmlタグのペアに展開されるはずだ。

リスト6

<html></html>

formなどの一部のタグは、次のように属性付きの状態で展開される。

リスト7

<form action=""></form>

id属性を指定したい場合には、次のように"#"に続けて任意の値を記述すればよい。

リスト8

div#menu

リスト9

<div id="menu"></div>

class属性を指定する場合は、"."に続けて任意の値を記述する。

リスト10

div.box

リスト11

<div class="box"></div>

複数のタグをネストした状態で展開したい場合は">"を使って次のようにする。

リスト12

div>ul#linklist>li.link>a

リスト13

<div>
    <ul id="linklist">
        <li class="link"><a href=""></a></li>
    </ul>
</div>

ネストではなく、同じ階層で展開したい場合には"+"で続けて記述する。

リスト14

h1+div#main

リスト15

<h1></h1>
<div id="main"></div>

"*"を使うと、同じタグを複数個連続して書くことができる。これはリストやテーブルを作る場合などに便利だ。

リスト16

li.link*5>a

リスト17

<li class="link"><a href=""></a></li>
<li class="link"><a href=""></a></li>
<li class="link"><a href=""></a></li>
<li class="link"><a href=""></a></li>
<li class="link"><a href=""></a></li>

展開前のコードは"()"で括ることによってグループ化することができる。たとえば次のコードの場合は、divタグはulタグの外側に展開されることになる。

リスト18

(ul>li*2)>div

リスト19

<ul>
    <li></li>
    <li></li>
</ul>
<div></div>

ちょっと変わったところでは、コードの末尾に"|e"を付けることで、以下のようにタグをブラウザで表示できる形で展開するといった機能もある。

リスト20

div#box>a*3|e

リスト21

&lt;div id="box"&gt;
    &lt;a href=""&gt;&lt;/a&gt;
    &lt;a href=""&gt;&lt;/a&gt;
    &lt;a href=""&gt;&lt;/a&gt;
&lt;/div&gt;

その他、使用できる略語は公式サイトのドキュメントに一覧で記載されている。細かな規則を覚えるよりも、実際にいろいろと試して手に馴染ませるのが一番だろう。

Zen-CodingはHTMLタグだけでなくCSSの展開にも対応している。CSSの展開は、styleタグの内側か、エディタのCSSモードを利用している場合のみ有効になる。たとえば、styleタグの中で背景を設定したい場合には次のようにタイプする。

リスト22

<style type="text/css">
bg+
</style>


<style type="text/css">
bg+
</style>

これはbackgroundプロパティのための略語で、次の形に展開される。

リスト23

<style type="text/css">
background:#FFF url() 0 0 no-repeat;
</style>

CSSで使える略語は、公式サイトにあるこちらのドキュメントに掲載されている。

Zen Codingは非常に多くのタグや構文をサポートしているので、最初は多少戸惑うかもしれない。しかし一度慣れてしまえば直感的にサクサクとコーディングすることができるようになる。マウス操作が必要ないため、キーボードから手を離さなくてもいいという点も魅力だ。HTMLの記述にウンザリしている人はぜひ試してみるといいだろう。