サンプル1:省略形の展開(Expanded Abbreviation)

展開前 div#main
div.content
p#item$*3
h2.title+div
(ul>li*3)+p
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル2:囲んでからの展開(Wrap with Abbreviation)

展開前 IE
Firefox
Chrome
入力内容 Ctrl + Shift + A(Macの場合は Command + Shift + A)を押してul.browser>li#item$* を入力

Powered by Zen Coding

 サンプル3:コメントの切り替え(Toggle Comment)

展開前
<ul>
    <li>IE</li>
    <li>Firefox</li>
    <li>Chrome</li>
    <li>Opera</li>
</ul>
        
入力内容 Ctrl + / (Macの場合は Command + /)

Powered by Zen Coding

 サンプル4:タグの除去(Remove Tag)

展開前 <div>Hello, World</div>
入力内容 Ctrl + K(Macの場合は Command + K)

Powered by Zen Coding

 サンプル5:1行にまとめる(Merge Lines)

展開前
<ul>
    <li>IE</li>
    <li>Firefox</li>
    <li>Chrome</li>
    <li>Opera</li>
</ul>
入力内容 Ctrl + Shift + M(Macの場合は Command + Shift + M)

Powered by Zen Coding

 サンプル6:編集個所の移動(New/Previous Edit Point)

展開前
<a href=""></a>
<a href=""></a>
<a href=""></a>
入力内容 次の編集個所 Ctrl+Alt+→ (Macの場合も同様)
前の編集個所 Ctrl+Alt+← (Macの場合も同様)

Powered by Zen Coding

 サンプル7:アイテムの選択(Select Next/Previous Item)

展開前
<div class="links">
<a href="" class="link" target="_blank"></a>
<a href="" class="link" target="_blank"></a>
</div>
入力内容 次のアイテム Ctrl+.(Macの場合は Command + .)
前のアイテム Ctrl+,(Macの場合は Command + ,)

Powered by Zen Coding

 サンプル8:数式の評価(Evaluate Math Expression)

展開前 1+2*3-4/2
入力内容 Ctrl + Y(Macの場合は Command + Y)

Powered by Zen Coding

 サンプル9:HTMLのひな型

展開前 html:4t
html:4s
html:xt
html:xs
html:5
meta:utf
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル10:スタイルシートのlinkタグ、styleタグ

展開前 link:css
style
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル11:JavaScriptのscript/noscriptタグなど

展開前 script:src
script
noscript
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル12:テーブルやリストの一括展開

展開前 table+
ul+
ol+
dl+
select+
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル13:formタグ

展開前 form
form:get
form:post
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル14:inputタグ1

展開前 input
input:hidden
input:text
input:password
input:radio
input:submit
input:button
input:checkbox
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル15:inputタグ2

展開前 input
input:h
input:t
input:p
input:r
input:s
input:b
input:c
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル16:width、heightプロパティ

展開前
<style type="text/css">
div{
  w
  w:a
  h
  h:a
}
</style>
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル17:borderプロパティ

展開前
<style type="text/css">
div{
  bd
  bd:n
  bd+
}
</style>
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル18:borderプロパティ

展開前
<style type="text/css">
div{
  m
  m:a
  m:0
  m:2
  m:3
  m:4
}
</style>
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding

 サンプル19:displayプロパティ

展開前
<style type="text/css">
div{
  d
  d:n
  d:b
}
</style>
入力内容 Ctrl + E(Macの場合は Command + E)

Powered by Zen Coding