Emmetの書き方をまとめてみた(HTML編その1)

よく使いそうなEmmetのHTMLの書き方をまとめてみました。

EmmetのHTMLの書き方その2はこちら

EmmetのCSSの書き方についてはこちら

さらに詳しく知りたい方はEmmetの公式サイトチートサイトをご覧ください。

要素の入れ子

書き方:ul>li

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

複数要素

書き方:h1+p+p

<h1></h1>
<p></p>
<p></p>

同一要素の連続

書き方:ul>li*3

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

連番

書き方:ul>li.list$*3

<ul> <li class="list1"></li> <li class="list2"></li> <li class="list3"></li>
</ul>

書き方:ul>li{リスト$}*3

<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li>
</ul>

id

書き方:div#test

<div id="test"></div>

class

書き方:div.test

<div class="test"></div>

複数class

書き方:div.test1.test2

<div class="test1 test2"></div>

属性

書き方:a[target=”_blank”]

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

複数属性

書き方:a[target=”_blank” rel=”noopener”]

<a href="" target="_blank" rel="noopener"></a>

要素のテキスト

書き方:a{リンク}

a href="">リンク</a>

色々組み合わせ

書き方:div>a#testId.testClass{テストリンク}[target=”_blank rel=”noopener””]

<div>
  <a href="" id="testId" class="testClass" target="_blank" rel="noopener">テストリンク</a>
</div>