もしも10分の1の行数でHTMLが書けたら：Zen-Codingで高速HTML＆CSSコーディング（1）（1/2 ページ）

Zen-Codingのテキストプラグイン使うと、効率的にHTMLが書けます。特定の省略された記法や展開を試そう

[ひらいさだあき，＠IT]

Zen-Codingとは

　1年ほど前から、Zen-Codingが話題になっています。Zen-Codingを使うと、特定の省略された記法を展開できます。この展開が非常に強力で、ちょっとしたHTMLを記述するのであれば、Zen-CodingでHTMLやCSSのマークアップを効率的に行えます。

　Zen-Codingはさまざまなテキストエディタに対応したプラグインとして提供されています。プラグインには、公式対応しているものと、サードパーティの開発者が作成したものがあります。

　公式対応：Aptana/Eclipse、TextMate、Coda、Notepad++など

　サードパーティ：Dreamweaver、Visual Studio、EmEditor、

　　　Sakura Editor、NetBeans、Chrome Extensionなど

　それぞれのプラグインによって、実装機能が異なる場合があります。これらのプラグインの詳細はZen-Codingの公式サイトから確認できます。

基本的な使い方

　ここからはZen-Codingの基本的な使い方を解説します。Zen-Codingをテキストエリアで利用できるサンプルを用いて、実際に試しながら読み進めてください。テキストエリアの左下にある「Powered by Zen Coding」の画像をクリックすると、英語ですが簡単な操作方法を確認できます。サンプルは IE 8／Firefox 4／Chrome 11／Safari 5で動作確認済みです。

　Zen-Codingは大きく分けて2つの使い方があります。まずはこの2つを覚えましょう。

• 省略形の展開（Expanded Abbreviation）
• 囲んでからの展開（Wrap with Abbreviation）

省略形の展開（Expanded Abbreviation）

　以下のサンプルへのリンクを開き、テキストエリアの文末にカーソルを合わせて、「Ctrl＋E（Macの場合は Command＋E）」を押してください。「html:5」がHTML 5形式のひな形に展開されます。また「html:4s」でHTML 4.0.1 Strictのひな形が、「html:4t」でHTML4.0.1 Transitionalのひな形が展開されます。

• サンプル1リンク

　このようにさまざまな省略形を入力し、「Ctrl + E」で展開することで、HTMLをマークアップを効率的に行えます。

囲んでからの展開（Wrap with Abbreviation）

　以下のサンプルへのリンクを開き、テキストエリアの文字列を選択して、「Ctrl＋Shift＋A（Macの場合は Command＋Shift＋A）」を押してください。ダイアログが出てくるので、「ul>li*」と入力してください。テキストエリアの内容が、リストタグに囲まれて展開されます。

• サンプル2リンク

　用意されたテキストをマークアップしたい場合には、こちらの使い方が便利です。このサンプルでも利用していますが、リストのテキストを用意して、後からタグ付けするといったことが簡単にできます。

基本的な記法

　よく使うタグの展開、id／class／属性の付け方、構造化されたタグの展開について解説します。この基本的な記法を覚えると、Zen-Codingの恩恵を実感できると思います。

よく使うタグの展開

　それぞれの行末で、「Ctrl＋E（Macの場合は Command＋E）」を押してください。タグに展開されます。

• サンプル3リンク

　他にもh1、h2、h3、h4、spanなど、一般的なタグの展開ができます。

id／class／属性の付け方

　タグの省略形に特定の形式の文字列を追加することで、id／class／属性を付けられます。

　idの場合は、タグの省略形の後に#id名を付けます。またdivの場合はタグを省略できます。それぞれの行末で、「Ctrl＋E（Macの場合はCommand＋E）」を押してください。idの付いたタグに展開されます。

• サンプル4リンク

　classの場合は、タグの省略形の後に.class名を付けます。それぞれの行末で、「Ctrl＋E （Macの場合はCommand＋E）」を押してください。classの付いたタグに展開されます。

• サンプル5リンク

　属性の場合は、タグの省略形の後に [属性名=属性] を付けます。複数の属性を記述する場合は、間にスペースを入れてください。それぞれの行末で、「Ctrl＋E （Macの場合はCommand＋E）」を押してください。属性の付いたタグに展開されます。

• サンプル6リンク