Zen-Codingを使いこなして、らくらくマークアップ：Zen-Codingで高速HTML＆CSSコーディング（2）（1/2 ページ）

Zen-Codingにはさまざまなコマンドや省略形があります。よく使いそうなものから覚えて、マークアップをさらに効率化しましょう

» 2011年07月21日 00時00分公開

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

Zen-Codingを使いこなす

　Zen-Codingを利用すると、効率的にHTMLやCSSのマークアップを行えます。前回（もしも10分の1の行数でHTMLが書けたら）はZen-Codingの基本的な機能をご紹介しました。

　今回は、さらにZen-Codingを使いこなすために、さまざまなコマンドや省略記法をご紹介します。サンプルはIE 8／Firefox 4／Chrome 12／Safari 5／Opera 11.5で動作確認済みです。

前回の復習

省略形の展開（Expanded Abbreviation）
囲んでからの展開（Wrap with Abbreviation）
idとclassと属性の付け方
構造化されたHTMLの展開（+ > * () $ ）

　　これらの機能について、簡単に復習しておきましょう。

省略形の展開（Expanded Abbreviation）

　「Ctrl+E（Macの場合は Command+E）」で省略形を展開できます。

　#を付けるとid名、.を付けるとclass名を付けられます。

　*は繰り返し、$は連番に展開されます。

　+は兄弟関係、>は親子関係、()はグループ化されて展開されます。

　以下のサンプルへのリンクを開いて、それぞれの行末で「Ctrl + E（Macの場合は Command + E）」を押してみてください。

サンプル1へのリンク

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

　「Ctrl + Shift + A（Macの場合は Command + Shift + A）」でテキストエリアの内容に対して省略形を展開できます。以下のサンプルへのリンクを開いて、テキストエリアの文字列を選択して、「Ctrl + Shift + A（Macの場合は Command + Shift + A）」を押してください。

サンプル2へのリンク

　思い出せてきたでしょうか？コマンドについてはテキストエリアの左下にある「Powered by Zen Coding」の画像をクリックすると、英語ですが簡単な操作方法を確認できます。

さまざまなコマンド

　これまでに以下の2つのコマンドをご紹介しました。

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

　Zen-Codingには、これら以外にも便利なコマンドがあります。全てのコマンドを使いこなす必要はありませんが、覚えておくと、より効率的にマークアップできます。本章では、よく使うコマンドをご紹介します。

　プラグインの種類によってはキーバインドが異なっていたり、機能が実装されていないこともありますので、詳細は各プラグインの操作方法を確認してください。

　英語になりますが、代表的なコマンド（Action）と、セレクタの扱い方については、以下のドキュメントが参考になります。

コメントの切り替え（Toggle Comment）

　テキストエリアの文字列にカーソルを合わせて「Ctrl+/（Macの場合はCommand＋/）」を押してください。タグがコメントアウトされます。コメントアウトされた状態で、もう一度「Ctrl+/（Macの場合はCommand＋/）」を押すと、コメントアウトが解除されます。

サンプル3へのリンク

タグの除去（Remove Tag）

　テキストエリアの文字列にカーソルを合わせて「Ctrl+k（Macの場合はCommand＋k）」を押してください。選択された部分のタグが削除されます。

サンプル4へのリンク

1行にまとめる（Merge Lines）

　テキストエリアの <ul> にカーソルを合わせて「Ctrl+Shift+M（Macの場合はCommand＋Shift+M）」を押してください。5行で表示されていたタグが、1行にまとまります。

サンプル5へのリンク

編集個所の移動（New/Previous Edit Point）

　テキストエリアの文字列にカーソルを合わせてから、新しい編集個所に移動する場合は「Ctrl+Alt+→」を、前の編集個所に移動する場合は「Ctrl+Alt+←」を押してください。カーソルが編集個所に移動します。編集個所に文字列を入力すると、次からその編集個所には移動しません。

注意：このコマンドはIEでは正しく動作しません。

サンプル6へのリンク

アイテムの選択（Select Next/Previous Item）

　テキストエリアの文字列にカーソルを合わせてから、新しいアイテムに移動する場合は「Ctrl+.（Macの場合はCommand＋.）」を、前の編集個所に移動する場合は「Ctrl+,（Macの場合はCommand＋,）」を押してください。カーソルがアイテムに移動します。アイテムとはタグ、属性、属性値などになります。

　また「Ctrl+L（Macの場合はCommand＋L）」で、1行を選択できます。