トップページ > コンテンツ > コンピュータ関連その他 > HTML基本 > HTML作成色々 > Emmet

Emmetを使うと省略記法で楽が出来る。
記述形式 説明 記述例 結果
> 子要素を意味する div>li <div>
<li></li>
</div>
+ 兄弟要素を意味する body>div+li <body>
<div></div>
<li></li>
</body>
^ 1個上の要素に移動 div>p>span^div <div>
<p><span></span></p>
<div></div>
</div>
() 1つのまとまりとしてグルーピング (div>span)+li <div>
<span></span>
</div>
<li></li>
# タグのIDを指定 div#test <div id="test"></div>
. タグのクラスを指定 div.test <div class="test"></div>
{} タグの中身を指定 div{test} <div>test</div>
*数字 タグを数字分y要素を複製 li*2 <li></li>
<li></li>
$ *と組み合わせた時に連番にする a{test$}*2 <a href="">test1</a>
<a href="">test2</a>

詳細はチートシート参照。
http://docs.emmet.io/cheat-sheet/
最終更新:2020年10月19日 23:17