Visual Studio Code:Emmet記法を使って階層タグを入力する

  • ブックマーク
  • Feedly

>を使って階層を出力する

mainタグの中にsectionタグを3つ入力するときは「main>section*3」と入力すると、

<main>
  <section></section>
  <section></section>
  <section></section>
</main>

と出力されます。

+を使って子階層に複数のタグを出力する

mainタグの中にsectionタグ3つとdivタグを入力するときは「main>section*3+div.btn」と入力すると、

<main>
  <section></section>
  <section></section>
  <section></section>
  <div class="btn"></div>
</main>

と出力されます。

キャレット「^」を使って親階層に複数タグを出力する

mainタグの中にsectionタグ3つとmainタグと同じ階層にfooterタグを出力するときは「^(キャレット)」を使って「main>section*3^footer」と入力すると、

<main>
  <section></section>
  <section></section>
  <section></section>
</main>
<footer></footer>

と出力されます。

括弧を使って階層タグを複数出力する

ulタグの中にliタグ3つを2つ出力するときは、括弧を使って「(ul>li*3)*2」と入力すると、

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

と出力されます。

情報源

書籍

この記事を書いた人

羽沢 仁

羽沢 仁

業務系システムのエンジニアとして、コンサルティング会社で5年、事業会社の社内SEとして5年、フリーランスとして6年、要求定義、設計、開発、テスト、リリース対応の業務に携わってきました。来年からは、街の○○屋さんと直接つながって、ITツールを提供するサービスを開始します。詳しいプロフィールはこちらをご参照ください。