連載
» 2011年07月21日 00時00分 UPDATE

Zen-Codingで高速HTML&CSSコーディング(2):Zen-Codingを使いこなして、らくらくマークアップ (1/2)

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

[ひらいさだあき,@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)」を押してみてください。

囲んでからの展開(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に変換されます。

       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

Touch Barという新UIを得た「MacBook Pro」、プレゼント!

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。