Zenn
🍣

VSCode で HTML 書くときは省略記号使うとめちゃ早でコード書ける

2022/04/01に公開
CSS
HTML
VS Code
tech

VSCode は Emmet がデフォルトで入っている
HTML や CSS を省略記法で書ける

省略記法使えば、めっちゃ早く HTML 書ける
< div >とかいちいち手で書くのは今日で止めてしまおう！

便利なチートシートにだいたい書き方は書いてあります。

https://docs.emmet.io/cheat-sheet/

今回は基本的なものだけ紹介します！

タグ書きたい

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 書ける！！

Discussion