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

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

[ひらいさだあき,@IT]
前のページへ 1|2       

便利な記法

 これまでに紹介した以外にも、さまざまな省略形があります。本章では覚えておくと効果的な省略形を紹介します。

 英語になりますが、タグの記法については、以下のドキュメントが参考になります。

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 ExtensionGreasemonkeyのUserScriptを作っているので、よかったら使ってみてください。

twitter : http://twitter.com/sada_h

blog : techlog


前のページへ 1|2       

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

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

Focus

- PR -

RSSについて

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

メールマガジン登録

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