Zen-Codingを使いこなして、らくらくマークアップ：Zen-Codingで高速HTML＆CSSコーディング（2）（1/2 ページ）
Zen-Codingにはさまざまなコマンドや省略形があります。よく使いそうなものから覚えて、マークアップをさらに効率化しましょう
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）」を押してみてください。
囲んでからの展開（Wrap with Abbreviation）
「Ctrl + Shift + A（Macの場合は Command + Shift + A）」でテキストエリアの内容に対して省略形を展開できます。以下のサンプルへのリンクを開いて、テキストエリアの文字列を選択して、「Ctrl + Shift + A（Macの場合は Command + Shift + A）」を押してください。
思い出せてきたでしょうか？ コマンドについてはテキストエリアの左下にある「Powered by Zen Coding」の画像をクリックすると、英語ですが簡単な操作方法を確認できます。
さまざまなコマンド
これまでに以下の2つのコマンドをご紹介しました。
- 省略形の展開（Expanded Abbreviation）
- 囲んでからの展開（Wrap with Abbreviation）
Zen-Codingには、これら以外にも便利なコマンドがあります。全てのコマンドを使いこなす必要はありませんが、覚えておくと、より効率的にマークアップできます。本章では、よく使うコマンドをご紹介します。
プラグインの種類によってはキーバインドが異なっていたり、機能が実装されていないこともありますので、詳細は各プラグインの操作方法を確認してください。
英語になりますが、代表的なコマンド（Action）と、セレクタの扱い方については、以下のドキュメントが参考になります。
コメントの切り替え（Toggle Comment）
テキストエリアの文字列にカーソルを合わせて「Ctrl+/（Macの場合はCommand＋/）」を押してください。タグがコメントアウトされます。コメントアウトされた状態で、もう一度「Ctrl+/（Macの場合はCommand＋/）」を押すと、コメントアウトが解除されます。
タグの除去（Remove Tag）
テキストエリアの文字列にカーソルを合わせて「Ctrl+k（Macの場合はCommand＋k）」を押してください。選択された部分のタグが削除されます。
1行にまとめる（Merge Lines）
テキストエリアの <ul> にカーソルを合わせて「Ctrl+Shift+M（Macの場合はCommand＋Shift+M）」を押してください。5行で表示されていたタグが、1行にまとまります。
編集個所の移動（New/Previous Edit Point）
テキストエリアの文字列にカーソルを合わせてから、新しい編集個所に移動する場合は「Ctrl+Alt+→」を、前の編集個所に移動する場合は「Ctrl+Alt+←」を押してください。カーソルが編集個所に移動します。編集個所に文字列を入力すると、次からその編集個所には移動しません。
注意：このコマンドはIEでは正しく動作しません。
アイテムの選択（Select Next/Previous Item）
テキストエリアの文字列にカーソルを合わせてから、新しいアイテムに移動する場合は「Ctrl+.（Macの場合はCommand＋.）」を、前の編集個所に移動する場合は「Ctrl+,（Macの場合はCommand＋,）」を押してください。カーソルがアイテムに移動します。アイテムとはタグ、属性、属性値などになります。
また「Ctrl+L（Macの場合はCommand＋L）」で、1行を選択できます。
数式の評価（Evaluate Math Expression）
ちょっと変わった機能として「数式の評価」があります。テキストエリアの数式にカーソルを合わせてから、「Ctrl+Y（Macの場合はCommand＋Y）」を押すと、数式の計算結果が表示されます。1+2*3-4/2は5に変換されます。
Copyright © ITmedia, Inc. All Rights Reserved.