Zen Codingでid属性とclass属性を指定する
Zen Codingでid属性とclass属性を指定する
では、Zen Codingでid属性とclass属性を同時に指定してみましょう。
- 省略形の入力
id属性とclass属性の省略形を続けて入力する。
- 省略形の展開
ショートカットキーで省略形を展開する。
- コードが展開された
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属性を指定できます。
- 範囲の選択
divタグでグループ化したいHTML要素の範囲を選択する。
- 省略形でラップを選択
+
キー(秀丸エディタの場合は
+
+
キー)を押して[Wrap with Abbreviation]メニューを選択する。
- 省略形の入力
[Enter zen coding abbreviation]ダイアログボックスで省略形「div」を入力し、[OK]をクリックする。
- 省略形の展開
id属性付きdivタグでHTML要素がラップされている。
この記事は、書籍『HTML+CSSコーディングが10倍速くなるZen Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。
ネットで話題の"究極の超速コーディング"がだれでもマスターできる!
めんどうなタグ入力も、一瞬でラクラク変換! Zen Codingを使えば、かんたんな「省略形」だけでHTML/CSSタグがどんどん入力でき、複雑なHTML/CSSも、あっという間にコーディング可能です!同じタグの繰り返しや入れ子構造、連番も一発で自動変換。Webページ制作が画期的にスピードアップできます。 日々大量のタグを打つWebデザイナー、マークアップエンジニア、サイト更新担当者らが泣いて喜ぶマジックツール、Zen Codingのはじめての解説書です。
ソーシャルもやってます!