HTML+CSSコーディングが10倍速くなるZen Coding

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
こもり　まさあき・岡部和昌著
ISBNコード
978-4-8443-2945-9
インプレス

この記事は、書籍『HTML+CSSコーディングが10倍速くなるZen Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。

ネットで話題の"究極の超速コーディング"がだれでもマスターできる！

めんどうなタグ入力も、一瞬でラクラク変換！ Zen Codingを使えば、かんたんな「省略形」だけでHTML/CSSタグがどんどん入力でき、複雑なHTML/CSSも、あっという間にコーディング可能です！同じタグの繰り返しや入れ子構造、連番も一発で自動変換。Webページ制作が画期的にスピードアップできます。日々大量のタグを打つWebデザイナー、マークアップエンジニア、サイト更新担当者らが泣いて喜ぶマジックツール、Zen Codingのはじめての解説書です。

この記事をシェアしてほしいパン！

HTMLでよく使うタグをZen Codingで入力する | Zen Coding 3-3

HTMLを一気に書き上げよう | Zen Coding 3-5

バックナンバー

この記事の筆者

こもりまさあき（cipher）
フリーランス

1972年生まれ。黎明期からWebサイト構築などに関わる。現在はWeb関連業務に加えてテクニカルライティング、講師など、業種を限定せずに活動しながら、Twitter（@cipher）でたまに毒を吐く日々。近著に『HTML+CSS コーディングベストプラクティス』（MdN・共著）など。
gaspanik weblog　http://blog.gaspanik.com/
ソーシャル系のアカウント一覧はこちら　http://eee.am/cipher

岡部和昌（おかべ・かずまさ）
Webデザイナー

1983年生まれ、埼玉県の田舎出身。大学で応用化学を学んだ後、ヤフー株式会社初のデザイナー新卒採用にて入社。現在に至る。同社サイトの大規模リニューアルのマークアップを数多くメインで担当した経験を持つ。ページ表示速度の高速化、マークアップの効率化に強い関心があり、HTML5やCSS3を用いたサイトの開発・運用、Java ScriptやPHPを用いた動的なサイト構築が得意分野。執筆記事に『続・ハイパフォーマンスWebサイト−ウェブ高速化のベストプラクティス』（オライリージャパン）付録「Yahoo! JAPANが実践するWebの高速化」（共著）。
kzms2 - html,css,javascript　http://kzms2.com/
Twitter　@kzms2