VSCode で HTML 書くときは省略記号使うとめちゃ早でコード書ける
VSCode は Emmet がデフォルトで入っている
HTML や CSS を省略記法で書ける
省略記法使えば、めっちゃ早く HTML 書ける
< div >とかいちいち手で書くのは今日で止めてしまおう!
便利なチートシートにだいたい書き方は書いてあります。
今回は基本的なものだけ紹介します!
タグ書きたい
div
と書いて Enter 押すだけ
<div></div>
タグにクラス名書きたい
div.tag-name
と書けば
<div class="tag-name"></div>
タグにID名書きたい
div#class-name
と書けば
<div id="class-name"></div>
divタグとpタグを兄弟で書きたい
div+p
と書けば
<div></div>
<p></p>
要素を繰り返して書きたい
li*10
と書けば
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
要素をネストさせたい
ul>li
と書けば
<ul>
<li></li>
</ul>
応用
テーブルを省略記法で書いてみる
table>tbody>(tr>th+td)*3
と書けば
<table>
<tbody>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
</tbody>
</table>
結論
省略記法使えばあっという間に HTML 書ける!!
Author And Source
この問題について(VSCode で HTML 書くときは省略記号使うとめちゃ早でコード書ける), 我々は、より多くの情報をここで見つけました https://zenn.dev/shirokuma_exp/articles/68569c78f114d6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol