備忘録_Emmet

ちょこちょこ追加修正しないと・・・

##>　子要素として展開する
ul>li>a

<ul>
  <li><a href=""></a></li>
</ul>

##+　隣接した要素(隣り合わせ配置)
dl>dt+dd

<dl>
  <dt></dt>
  <dd></dd>
</dl>

##^　上の階層(続けて配置)
div>p^div

<div>
  <p></p>
</div>
<div></div>

##IDやクラスをつける
ul#hoge>li.moge

<ul id="hoge">
  <li class="moge"></li>
</ul>

##IDやクラスを複数つける
p#id1.class1.class2

<p id="id1" class="class1 class2"></p>

##divの省略
#main^.sub

<div id="main"></div>
<div class="sub"></div>

##連番と繰り返し
ul>li#item$*5

<ul>
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  <li id="item4"></li>
  <li id="item5"></li>
</ul>

##降順に番号をつける
ul>li#item$@-*3

<ul>
  <li id="item3"></li>
  <li id="item2"></li>
  <li id="item1"></li>
</ul>

##開始番号を指定して、番号をつける
ul>li#item$@5*3

<ul>
  <li id="item5"></li>
  <li id="item6"></li>
  <li id="item7"></li>
</ul>

##まとめて展開する
dl>(dt+dd)*3

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

##属性・値を指定する
a[href=# target=_blank]

<a href="#" target="_blank"></a>

##文字列を入れる
div>p{テキスト}

<div>
  <p>テキスト</p>
</div>

ul>li*3>a{メニュー$}

<ul>
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
  <li><a href="">メニュー3</a></li>
</ul>

##ダミー文章を入れる
lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore id minus dolorem architecto, neque voluptatibus et, culpa iste ad, voluptas perspiciatis magni earum. Ex ipsum eum mollitia, eius sint, est.

p>lorem5

<p>Lorem ipsum dolor sit amet.</p>

##|e　特殊文字をエンコードして出力
div>p|e

<div>
  <p></p>
</div>

##|c　閉じたタグの後にIDやクラスをコメントで出力
#main>p^.sub>p|c

<div id="main">
  <p></p>
</div>
<!-- /#main -->
<div id="sub">
  <p></p>
</div>
<!-- /.sub -->

##|s　シングルラインで出力
ul>li*3|s

<ul><li></li><li></li><li></li></ul>

#捕捉機能

##Wrap変換(Ctrl + Shift + G)

特定の範囲を選択し、Emmetのコードを入力するとその前後に開始タグを終了タグを追加してくれる

##展開済みのHTMLを更新(Ctrl + Shift +U)

すでに展開済みのHTMLを更新できる
※出現したウィンドウに入力することで追加できる

##画像の幅・高さ情報を追加(Ctrl + U)

保存済みのHTMLの画像パスのところにカーソルを合わせて「Ctrl + U」で、画像の幅・高さを追加することができる

##編集点間の移動(Ctrl + Alt + ← or →)

属性の値などの編集点を移動するショートカット

#最後に

##Emmetのチートシート