Tweet

Zen-Codingを使いこなして、らくらくマークアップ

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

　Zen-Codingを使いこなす

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

　今回はさらにZen-Codingを使いこなすために、さまざまなコマンドや省略記法をご紹介します。サンプルはIE8／Firefox4／Chrome12／Safari5／Opera11.5で動作確認済みです。

　これらの機能について、簡単に復習しておきましょう。「Ctrl+E（Macの場合は Command+E）」で省略形を展開できます。

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

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

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

　それぞれの行末で「Ctrl + E（Macの場合は Command + E）」を押してみてください。

展開前	div#main div.content p#item$*3 h2.title+div (ul>li*3)+p
入力内容	Ctrl + E （Macの場合は Command + E）
div#main div.content p#item$*3 h2.title+div (ul>li*3)+p

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

展開前	IE Firefox Chrome Opera
入力内容	Ctrl + Shift + A (Macの場合は Command + Shift + A)を押して ul.browser>li#item$* を入力
IE Firefox Chrome Opera

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

　さまざまなコマンド

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

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

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

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

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

• Actions - zen-coding
• ZenHTMLSelectorsEn - zen-coding

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

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

展開前	<ul> <li>IE</li> <li>Firefox</li> <li>Chrome</li> <li>Opera</li> </ul>
入力内容	Ctrl + / (Macの場合は Command + /)
<ul> <li>IE</li> <li>Firefox</li> <li>Chrome</li> <li>Opera</li> </ul>

□ タグの除去(Remove Tag)

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

展開前	<div>Hello, World</div>
入力内容	Ctrl + K (Macの場合は Command + K)
<div>Hello, World</div>

□ 1行にまとめる（Merge Lines）

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

展開前	<ul> <li>IE</li> <li>Firefox</li> <li>Chrome</li> <li>Opera</li> </ul>
入力内容	Ctrl+Shift+M (Macの場合は Command + Shift + M)
<ul> <li>IE</li> <li>Firefox</li> <li>Chrome</li> <li>Opera</li> </ul>

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

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

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

展開前	<a href=""></a> <a href=""></a> <a href=""></a>
入力内容	次の編集個所 Ctrl+Alt+→ （Macの場合も同様） 前の編集個所 Ctrl+Alt+← （Macの場合も同様）
<a href=""></a> <a href=""></a> <a href=""></a>

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

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

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

展開前	<div class="links"> <a href="" class="link" target="_blank"></a> <a href="" class="link" target="_blank"></a> </div>
入力内容	次のアイテム Ctrl+. (Macの場合は Command + .) 前のアイテム Ctrl+, (Macの場合は Command + ,)
<div class="links"> <a href="" class="link" target="_blank"></a> <a href="" class="link" target="_blank"></a> </div>

□ 数式の評価（Evaluate Math Expression）

　ちょっと変わった機能として「数式の評価」があります。テキストエリアの数式にカーソルを合わせてから、「Ctrl+Y（Macの場合はCommand＋Y）」を押すと、数式の計算結果が表示されます。1+2*3-4/2は5に変換されます。

展開前	1+2*3-4/2
入力内容	Ctrl+Y （Macの場合は Command + Y）
1+2*3-4/2

1-2

INDEX
Zen-Codingで高速HTML＆CSSコーディング（2） Zen-Codingを使いこなして、らくらくマークアップ
	Page1 Zen-Codingの高度な使い方 前回の復習 コメントの切り替え タグの除去 1行にまとめる 編集個所の移動 アイテムの選択 数式の評価
	Page2 便利な記法 HTMLのひな形 スタイルシート JavaScript テーブルやリストの一括展開 form input widthとheight border margin display

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード