Zen-Codingを使いこなして、らくらくマークアップ：Zen-Codingで高速HTML＆CSSコーディング（2）（2/2 ページ）
Zen-Codingにはさまざまなコマンドや省略形があります。よく使いそうなものから覚えて、マークアップをさらに効率化しましょう
便利な記法
これまでに紹介した以外にも、さまざまな省略形があります。本章では覚えておくと効果的な省略形を紹介します。
英語になりますが、タグの記法については、以下のドキュメントが参考になります。
HTMLのひな型
さまざまな形式のHTMLのひな型を展開できます。一部ですが、展開例を記載します。それぞれの行末で「Ctrl＋E （Macの場合はCommand＋E）」を押してください。
| html:4t | HTML 4.01 Transitional 形式 |
|---|---|
| html:4s | HTML 4.01 Strict 形式 |
| html:xt | XHTML 1.0 Transitional 形式 |
| html:xs | XHTML 1.0 Strict 形式 |
| html:5 | HTML 5 形式 |
またmetaタグによるUTF-8の文字コード指定は「meta:utf」で展開できます。
スタイルシートのlinkタグ、styleタグ
スタイルシートのlinkタグ、styleタグを展開します。
JavaScriptのscript／noscriptタグなど
JavaScriptファイルへリンクするscriptタグ、通常のscriptタグ、noscriptタグを展開します。
テーブルやリストの一括展開
テーブルやリストなどの複合的に構成されるタグを一括で展開します。この場合、+ > * といった記法は併用できません。
formタグ
通常のformタグ、GETを利用するformタグ、POSTを利用するformタグを展開します。
inputタグ
さまざまなinputタグを展開します。一部ですが、展開例を記載します。
inputタグの展開では、さらに省略形も用意されており、type属性の値の頭文字で展開できます。
CSSの記法
CSSのプロパティもZen-Codingで省略形から展開できます。省略形の数がとても多いため、紹介できるのはほんの一部になります。またCSSの展開はstyleタグの内部か、CSSファイルでのみ動作します。
英語になりますが、CSSの記法については、以下のドキュメントが参考になります。よく使うプロパティについては、こちらで確認してください。
width、heightプロパティ
width、heightプロパティを展開します。w、w:a、h、h:aの行末で「Ctrl+E（Macの場合はCommand+E）」を押してください。
borderプロパティ
borderプロパティを展開します。bd、bd:n、bd+の行末で「Ctrl+E（Macの場合はCommand+E）」を押してください。
marginプロパティ
marginプロパティを展開します。m、m:a、m:0、m:2、m:3、m:4の行末で「Ctrl+E（Macの場合はCommand+E）」を押してください。
displayプロパティ
displayプロパティを展開します。d、d:n、d:bの行末で「Ctrl+E（Macの場合はCommand+E）」を押してください。
まとめ
今回は以下の3つの内容をご紹介しました。
- さまざまコマンド
- 便利な記法
- CSSの記法
多くのことを覚えればそれだけ便利になりますが、Zen-Codingのコマンドと省略形はとてもたくさんあります。そのため、自分がよく使っているタグや操作を確認して、まずはそういった部分から使い始めてください。簡単なタグの展開から始めて、徐々にコマンドや省略形を覚えていくことで、効率的なマークアップができるようになります。
文中でも何点か紹介しましたが、Zen-Coding Projectでドキュメントが公開されていますので参考にしてください。
著者紹介
ひらいさだあき
仕事ではSIerでJavaの開発やトラブルシューティングを行っています。また最近ではブラウザやHTML5に興味を持っています。
Zen-Codingについては、Chrome ExtensionやGreasemonkeyのUserScriptを作っているので、よかったら使ってみてください。
twitter : http://twitter.com/sada_h
blog : techlog
Copyright © ITmedia, Inc. All Rights Reserved.