Zen Codingでid属性とclass属性を指定する

Zen Codingでid属性とclass属性を指定する

では、Zen Codingでid属性とclass属性を同時に指定してみましょう。

1. 省略形の入力

   id属性とclass属性の省略形を続けて入力する。

   
2. 省略形の展開

   ショートカットキーで省略形を展開する。

3. コードが展開された

   id属性とclass属性が「<h3 id="date100605" class="entrydate"></h3>」と展開されている。

   

Zen Codingでid属性とclass属性を付与したdivタグで囲む

また、Zen CodingでHTMLタグの省略形を付けず、id属性とclass属性の省略形だけを入力して展開すると、id属性とclass属性をdivタグで囲むことができます。

HTMLタグをdiv要素で囲む際にも、id属性やclass属性を指定できます。

1. 範囲の選択

   divタグでグループ化したいHTML要素の範囲を選択する。

   
2. 省略形でラップを選択

   ＋キー（秀丸エディタの場合は＋＋キー）を押して［Wrap with Abbreviation］メニューを選択する。

3. 省略形の入力

   ［Enter zen coding abbreviation］ダイアログボックスで省略形「div」を入力し、［OK］をクリックする。

   
4. 省略形の展開

   id属性付きdivタグでHTML要素がラップされている。