LoginSignup
14
11

More than 5 years have passed since last update.

Emmet / ZencodingでHTMLを展開

Posted at

公式サイト

公式ドキュメント

チートシート

ドットインストール

Emmet/Zen-coding入門

非公式Emmet/ZenCoding

秀丸マクロ
http://exoego.net/archives/zencoding-in-hidemaru

Edge Code拡張
https://github.com/emmetio/emmet/downloads

Vidual Studio 2012プラグイン
http://visualstudiogallery.msdn.microsoft.com/175f4e5a-bcc4-4931-b3e6-164cb1e60277
ショートカットキー

Expand Abbreviation
Sublime Text (Tab)

Wrap with Abbreviation
Sublime Text (Ctrl + Alt + Enter)(control + option + return)

省略形の展開

body

クラス属性の展開

p.honbun

複数のクラスの展開

article.news.left

ID属性の展開

section#about

属性の展開

table[border]

属性値の展開

abbr[title=zen coding]

親子関係の展開

article<p

1つ上の階層に戻る

2つ上の階層に戻る

兄弟関係の展開

dt+dd

要素内テキスト
{}

可能性の高い子要素の展開

ul+
table+
dl+

同じ要素の複数展開

p*3

グループの同時展開

(div<p)*3

連番の見出しの同時展開

h$*3

連番の属性の同時展開
p#topic-$*3

2桁の連番の同時展開

p#topic-$$*3

基本構造の展開

html:5

エスケープして展開

html:5|e

2重にエスケープして展開

html:5|e|e

IDにコメントを追加して展開

section#news|c

タグで包む

ul<li*<a

cssの展開

bgc

cssの値を同時に展開
d:b

:の後にスペースを空けて展開

fl:l|fc

cssの特殊構文
@i

14
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
11