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>

書き方：div#test

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

書き方：div.test

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

書き方：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>